feat: quote style

vincentdchan · Dec 3, 2023 · 22b647a · 22b647a
1 parent 3fcb206
commit 22b647a
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 3 deletions.
diff --git a/packages/blocky-core/css/blocky-core.css b/packages/blocky-core/css/blocky-core.css
@@ -123,6 +123,17 @@
   min-width: 26px;
 }
 
+.blocky-left-pad.quote {
+  justify-content: start;
+  padding-bottom: 4px;
+  width: 14px;
+  min-width: 14px;
+}
+
+.blocky-quote-pad {
+  border-left: 3px solid black;
+}
+
 .blocky-bullet-content:before {
   content: "•";
   color: var(--blocky-primary-color);

diff --git a/packages/blocky-core/src/block/textBlock.ts b/packages/blocky-core/src/block/textBlock.ts
@@ -492,8 +492,11 @@ export class TextBlock extends ContentBlock {
     spanStyle.onSpanCreated?.(element);
   }
 
-  #createLeftPadContainer(): HTMLDivElement {
-    const container = elem("div", "blocky-left-pad");
+  #createLeftPadContainer(className?: string): HTMLDivElement {
+    const container = elem(
+      "div",
+      "blocky-left-pad" + (isString(className) ? " " + className : "")
+    );
     container.contentEditable = "false";
     return container;
   }
@@ -530,7 +533,7 @@ export class TextBlock extends ContentBlock {
   }
 
   #createQuoteRenderer(): LeftPadRenderer {
-    const container = this.#createLeftPadContainer();
+    const container = this.#createLeftPadContainer("quote");
 
     const quoteContent = elem("div", "blocky-quote-pad");
     container.appendChild(quoteContent);

diff --git a/packages/blocky-core/src/plugins/quotePlugin.ts b/packages/blocky-core/src/plugins/quotePlugin.ts
@@ -0,0 +1,50 @@
+import { isWhiteSpace } from "blocky-common/es";
+import { type IPlugin, TextBlock, type PluginContext } from "@pkg/index";
+import { Changeset, TextType } from "@pkg/data";
+import Delta from "quill-delta-es";
+import { isNumber, isString } from "lodash-es";
+import { filter, takeUntil } from "rxjs";
+
+function makeQuotePlugin(): IPlugin {
+  return {
+    name: "quote",
+    onInitialized(context: PluginContext) {
+      const { editor, dispose$ } = context;
+      editor.textInput$
+        .pipe(
+          takeUntil(dispose$),
+          filter((evt) => evt.blockElement.t === TextBlock.Name) // don't apply on Title block
+        )
+        .subscribe((evt) => {
+          const { beforeString, blockElement } = evt;
+          const { state } = editor;
+          const changeset = new Changeset(state);
+          const delta = new Delta();
+
+          let index = 0;
+          for (const op of evt.applyDelta.ops) {
+            if (isString(op.insert)) {
+              const before = beforeString.slice(0, index);
+              if (isWhiteSpace(op.insert)) {
+                if (before === "|") {
+                  delta.delete(2);
+                  changeset.updateAttributes(blockElement, {
+                    textType: TextType.Quote,
+                  });
+                }
+                break;
+              }
+              index += op.insert.length;
+            } else if (isNumber(op.retain)) {
+              index += op.retain;
+            }
+          }
+
+          changeset.textEdit(blockElement, "textContent", () => delta);
+          changeset.apply();
+        });
+    },
+  };
+}
+
+export default makeQuotePlugin;
diff --git a/packages/blocky-core/src/view/controller.ts b/packages/blocky-core/src/view/controller.ts
@@ -35,6 +35,7 @@ import makeCodeTextPlugin from "@pkg/plugins/codeTextPlugin";
 import makeBulletListPlugin from "@pkg/plugins/bulletListPlugin";
 import makeHeadingsPlugin from "@pkg/plugins/headingsPlugin";
 import makeNumberListPlugin from "@pkg/plugins/numberListPlugin";
+import makeQuotePlugin from "@pkg/plugins/quotePlugin";
 import makeUndoPlugin from "@pkg/plugins/undoPlugin";
 import { isUndefined } from "lodash-es";
 
@@ -46,6 +47,7 @@ export function makeDefaultEditorPlugins(): IPlugin[] {
     makeBulletListPlugin(),
     makeNumberListPlugin(),
     makeHeadingsPlugin(),
+    makeQuotePlugin(),
   ];
 }