Add editor component based on Shadcn UI and Edkit

Co-authored-by: TechQuery <[email protected]>

Author: Copilot

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-slot": "^1.2.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "edkit": "^1.2.7",
     "lodash.debounce": "^4.0.8",
     "lucide-react": "^0.562.0",
     "mobx": "^6.15.0",

pnpm-lock.yaml

@@ -342,6 +342,63 @@
           "type": "registry:component"
         }
       ]
+    },
+    {
+      "name": "editor",
+      "type": "registry:component",
+      "title": "Editor",
+      "description": "A lightweight rich text editor based on Edkit and Shadcn UI with various formatting tools.",
+      "registryDependencies": ["button"],
+      "dependencies": [
+        "edkit",
+        "lucide-react",
+        "mobx",
+        "mobx-react",
+        "mobx-react-helper",
+        "web-utility"
+      ],
+      "files": [
+        {
+          "path": "registry/new-york/blocks/editor/editor.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york/blocks/editor/tool.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york/blocks/editor/tools/index.ts",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york/blocks/editor/tools/text.ts",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york/blocks/editor/tools/layout.ts",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york/blocks/editor/tools/control.ts",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york/blocks/editor/tools/media.ts",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york/blocks/editor/tools/color.tsx",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york/blocks/editor/tools/extra.ts",
+          "type": "registry:component"
+        },
+        {
+          "path": "registry/new-york/blocks/editor/index.ts",
+          "type": "registry:component"
+        }
+      ]
     }
   ]
 }

registry.json

@@ -0,0 +1,127 @@
+"use client";
+
+import { EditorComponent, ImageTool, Tool, editor } from "edkit";
+import { computed, observable } from "mobx";
+import { observer } from "mobx-react";
+import { FormComponent, FormComponentProps } from "mobx-react-helper";
+import { createRef } from "react";
+import { Constructor } from "web-utility";
+
+import { AudioTool, DefaultTools, VideoTool } from "./tools";
+import { cn } from "@/lib/utils";
+
+export interface EditorProps extends FormComponentProps {
+  tools?: Constructor<Tool>[];
+  className?: string;
+}
+
+export interface Editor extends EditorComponent {}
+
+@observer
+@editor
+export class Editor
+  extends FormComponent<EditorProps>
+  implements EditorComponent
+{
+  static displayName = "Editor";
+
+  box = createRef<HTMLDivElement>();
+
+  @observable
+  accessor cursorPoint = "";
+
+  @computed
+  get toolList(): Tool[] {
+    return (this.observedProps.tools || DefaultTools).map(
+      (ToolButton) => new ToolButton()
+    );
+  }
+
+  @computed
+  get imageTool() {
+    return this.toolList.find(
+      (tool) => tool instanceof ImageTool
+    ) as ImageTool;
+  }
+
+  @computed
+  get audioTool() {
+    return this.toolList.find(
+      (tool) => tool instanceof AudioTool
+    ) as AudioTool;
+  }
+
+  @computed
+  get videoTool() {
+    return this.toolList.find(
+      (tool) => tool instanceof VideoTool
+    ) as VideoTool;
+  }
+
+  componentDidMount() {
+    super.componentDidMount();
+
+    const { defaultValue } = this.props;
+
+    if (defaultValue != null) this.box.current!.innerHTML = defaultValue;
+
+    document.addEventListener("selectionchange", this.updateTools);
+  }
+
+  componentWillUnmount() {
+    super.componentWillUnmount();
+
+    document.removeEventListener("selectionchange", this.updateTools);
+  }
+
+  updateTools = () => {
+    if (this.box.current !== document.activeElement) return;
+
+    const selection = getSelection();
+    if (!selection || selection.rangeCount === 0) return;
+
+    const { endContainer } = selection.getRangeAt(0) || {};
+    const element =
+      endContainer instanceof Element
+        ? endContainer
+        : endContainer?.parentElement;
+
+    const rect = element?.getBoundingClientRect();
+    if (rect) {
+      this.cursorPoint = [rect.x, rect.y].join("");
+    }
+  };
+
+  updateValue = (markup: string) => (this.innerValue = markup.trim());
+
+  render() {
+    // Don't remove unused variable `cursorPoint`, which is used for triggering updates
+    const { cursorPoint, toolList, innerValue } = this;
+    const { name, className } = this.props;
+
+    return (
+      <>
+        <header className="flex flex-wrap gap-1 mb-2">
+          {toolList.map((tool) => tool.render(this.box))}
+        </header>
+        <div
+          ref={this.box}
+          className={cn(
+            "min-h-[200px] w-full rounded-md border border-input bg-background px-3 py-2",
+            "text-base shadow-xs outline-none",
+            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          contentEditable
+          onInput={({ currentTarget: { innerHTML } }) =>
+            this.updateValue(innerHTML)
+          }
+          onPaste={this.handlePasteDrop}
+          onDrop={this.handlePasteDrop}
+        />
+        <input type="hidden" name={name} value={innerValue} />
+      </>
+    );
+  }
+}

registry/new-york/blocks/editor/editor.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { configure } from "mobx";
+import { formToJSON } from "web-utility";
+import { Editor, OriginalTools, ExtraTools } from "./index";
+
+configure({ enforceActions: "never" });
+
+export default function EditorExample() {
+  return (
+    <form
+      className="container mx-auto max-w-4xl p-6"
+      onSubmit={(event) => {
+        event.preventDefault();
+        const { content } = formToJSON(event.currentTarget);
+        alert(content);
+      }}
+    >
+      <div className="space-y-4">
+        <div>
+          <h1 className="text-2xl font-bold mb-2">Rich Text Editor</h1>
+          <p className="text-muted-foreground mb-4">
+            A lightweight rich text editor based on Edkit and Shadcn UI
+          </p>
+        </div>
+
+        <Editor
+          tools={[...OriginalTools, ...ExtraTools]}
+          name="content"
+          defaultValue="Hello <b>Edkit</b>!"
+          onChange={console.log}
+        />
+
+        <button
+          className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 py-2"
+          type="submit"
+        >
+          Submit
+        </button>
+      </div>
+    </form>
+  );
+}

registry/new-york/blocks/editor/example.tsx

@@ -0,0 +1,3 @@
+export * from "./tool";
+export * from "./tools";
+export * from "./editor";