@zuilib/text-editor 0.0.0

package/README.md

@@ -0,0 +1,57 @@
+# @zuilib/text-editor
+
+Markdown editor for ZUI Design System — a React component built on [Lexical](https://lexical.dev/) with markdown shortcuts, code highlighting, checklists, and raw/rich/view modes.
+
+## Installation
+
+```bash
+pnpm add @zuilib/text-editor @zuilib/core lexical @lexical/react @lexical/markdown @lexical/rich-text @lexical/code @lexical/list @lexical/link
+```
+
+## Usage
+
+```tsx
+import { useState } from 'react'
+import { MarkdownEditor } from '@zuilib/text-editor'
+import '@zuilib/text-editor/styles.css'
+
+function Notes() {
+  const [value, setValue] = useState('# Hello\n\n- [ ] Try me')
+
+  return <MarkdownEditor value={value} onChange={setValue} />
+}
+```
+
+## Modes
+
+```tsx
+// Rich markdown editing (default) — shortcuts like `#`, `- [ ]`, ``` `
+<MarkdownEditor mode="edit-md" value={value} onChange={setValue} />
+
+// Raw markdown in a plain textarea
+<MarkdownEditor mode="edit-raw" value={value} onChange={setValue} />
+
+// Read-only rendered view
+<MarkdownEditor mode="view" value={value} />
+```
+
+## Props
+
+- `value`: `string` — markdown source
+- `onChange`: `(value: string) => void`
+- `mode`: `'edit-md' | 'edit-raw' | 'view'` (default `'edit-md'`)
+- `placeholder`: `string` (default `'Start writing...'`)
+- `readOnly`: `boolean`
+- `autoFocus`: `boolean`
+- `className`: `string`
+
+## Features
+
+- Markdown shortcuts: headings, lists, checklists, code blocks, quotes, links
+- Syntax-highlighted fenced code blocks
+- Undo/redo history
+- Cursor-stable mode switching between raw and rich editing
+
+## License
+
+MIT

package/dist/index.css

@@ -0,0 +1,79 @@
+/* src/styles.css */
+.zui-text-editor {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+.zui-text-editor-content {
+  min-height: 100%;
+  padding: 1.5rem 2rem;
+  outline: none;
+}
+.zui-text-editor-placeholder {
+  position: absolute;
+  top: 1.5rem;
+  left: 2rem;
+  pointer-events: none;
+  user-select: none;
+}
+.zui-checklist {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+.zui-checklist li[role=checkbox] {
+  position: relative;
+  padding-left: 1.75rem;
+  margin-left: 0;
+  cursor: pointer;
+  list-style: none;
+}
+.zui-checklist li[role=checkbox]::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0.25em;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-radius: 0.2rem;
+  opacity: 0.5;
+  background: transparent;
+}
+.zui-checklist li[role=checkbox][aria-checked=true]::before {
+  background: currentColor;
+  opacity: 0.5;
+}
+.zui-checklist li[role=checkbox][aria-checked=true]::after {
+  content: "";
+  position: absolute;
+  left: 0.3rem;
+  top: 0.35em;
+  width: 0.4rem;
+  height: 0.7rem;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.zui-text-editor-textarea {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  padding: 1.5rem 2rem;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: inherit;
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    "SF Mono",
+    Menlo,
+    Consolas,
+    "Liberation Mono",
+    monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  border: none;
+}

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type Props = Readonly<{
+    value?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    readOnly?: boolean;
+    className?: string;
+    mode?: 'edit-raw' | 'edit-md' | 'view';
+    autoFocus?: boolean;
+}>;
+declare function MarkdownEditor({ value, onChange, placeholder, readOnly, className, mode, autoFocus, }: Props): react_jsx_runtime.JSX.Element;
+
+export { MarkdownEditor, type Props as MarkdownEditorProps };

package/dist/index.js

@@ -0,0 +1,391 @@
+// src/MarkdownEditor.tsx
+import { useCallback, useEffect as useEffect5, useMemo, useRef as useRef2, useState } from "react";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
+import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
+import { CHECK_LIST, CODE, TRANSFORMERS } from "@lexical/markdown";
+import { useLexicalComposerContext as useLexicalComposerContext5 } from "@lexical/react/LexicalComposerContext";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { ListItemNode, ListNode as ListNode2 } from "@lexical/list";
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+
+// src/plugins/ChecklistShortcutPlugin.tsx
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import {
+  $isListItemNode,
+  $isListNode,
+  ListNode
+} from "@lexical/list";
+import { $getNodeByKey, TextNode } from "lexical";
+var CHECK_PATTERN = /^\[(\s|x)?\]\s/i;
+function ChecklistShortcutPlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    const unregisterMutation = editor.registerMutationListener(
+      ListNode,
+      (mutations) => {
+        editor.getEditorState().read(() => {
+          for (const [key, type] of mutations) {
+            if (type === "destroyed") continue;
+            const dom = editor.getElementByKey(key);
+            const node = $getNodeByKey(key);
+            if (dom && $isListNode(node)) {
+              ;
+              dom.__lexicalListType = node.getListType();
+            }
+          }
+        });
+      }
+    );
+    const unregisterTransform = editor.registerNodeTransform(
+      TextNode,
+      (textNode) => {
+        const listItem = textNode.getParent();
+        if (!$isListItemNode(listItem)) return;
+        if (listItem.getFirstChild()?.getKey() !== textNode.getKey()) return;
+        const listNode = listItem.getParent();
+        if (!$isListNode(listNode) || listNode.getListType() === "check")
+          return;
+        const text = textNode.getTextContent();
+        const match = text.match(CHECK_PATTERN);
+        if (!match) return;
+        const checked = match[1] === "x" || match[1] === "X";
+        textNode.setTextContent(text.slice(match[0].length));
+        listNode.setListType("check");
+        listItem.setChecked(checked);
+        textNode.select(0, 0);
+      }
+    );
+    return () => {
+      unregisterMutation();
+      unregisterTransform();
+    };
+  }, [editor]);
+  return null;
+}
+
+// src/plugins/CodeBlockShortcutPlugin.tsx
+import { useEffect as useEffect2 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext2 } from "@lexical/react/LexicalComposerContext";
+import {
+  $createParagraphNode,
+  $getSelection,
+  $isParagraphNode,
+  $isRangeSelection,
+  $isRootOrShadowRoot,
+  COMMAND_PRIORITY_LOW,
+  KEY_ARROW_DOWN_COMMAND,
+  TextNode as TextNode2
+} from "lexical";
+import { $createCodeNode, $isCodeNode } from "@lexical/code";
+var CODE_BLOCK_PATTERN = /^```(\w[\w-]*)?$/;
+function CodeBlockShortcutPlugin() {
+  const [editor] = useLexicalComposerContext2();
+  useEffect2(() => {
+    const unregisterTransform = editor.registerNodeTransform(
+      TextNode2,
+      (textNode) => {
+        const parent = textNode.getParent();
+        if (!$isParagraphNode(parent)) return;
+        if (parent.getFirstChild()?.getKey() !== textNode.getKey()) return;
+        const grandParent = parent.getParent();
+        if (!grandParent || !$isRootOrShadowRoot(grandParent)) return;
+        const text = textNode.getTextContent().trimEnd();
+        const match = text.match(CODE_BLOCK_PATTERN);
+        if (!match) return;
+        const language = match[1] || void 0;
+        const codeNode = $createCodeNode(language);
+        parent.replace(codeNode);
+        codeNode.selectEnd();
+      }
+    );
+    const unregisterCommand = editor.registerCommand(
+      KEY_ARROW_DOWN_COMMAND,
+      () => {
+        const selection = $getSelection();
+        if (!$isRangeSelection(selection) || !selection.isCollapsed()) return false;
+        const anchor = selection.anchor;
+        const anchorNode = anchor.getNode();
+        let topNode = anchorNode;
+        while (topNode.getParent() && !$isRootOrShadowRoot(topNode.getParent())) {
+          topNode = topNode.getParent();
+        }
+        if (!$isCodeNode(topNode)) return false;
+        const root = topNode.getParent();
+        if (!root || root.getLastChild()?.getKey() !== topNode.getKey()) return false;
+        const codeText = topNode.getTextContent();
+        const lastNewline = codeText.lastIndexOf("\n");
+        const isOnLastLine = anchor.offset >= lastNewline + 1;
+        if (!isOnLastLine) return false;
+        const paragraph = $createParagraphNode();
+        topNode.insertAfter(paragraph);
+        paragraph.selectStart();
+        return true;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+    return () => {
+      unregisterTransform();
+      unregisterCommand();
+    };
+  }, [editor]);
+  return null;
+}
+
+// src/plugins/CodeHighlightPlugin.tsx
+import { useEffect as useEffect3 } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext3 } from "@lexical/react/LexicalComposerContext";
+import { registerCodeHighlighting } from "@lexical/code";
+function CodeHighlightPlugin() {
+  const [editor] = useLexicalComposerContext3();
+  useEffect3(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+  return null;
+}
+
+// src/plugins/MarkdownSyncPlugin.tsx
+import { useEffect as useEffect4, useRef } from "react";
+import { useLexicalComposerContext as useLexicalComposerContext4 } from "@lexical/react/LexicalComposerContext";
+import {
+  $convertFromMarkdownString,
+  $convertToMarkdownString
+} from "@lexical/markdown";
+function MarkdownSyncPlugin({
+  initialMarkdown = "",
+  onChange,
+  transformers
+}) {
+  const [editor] = useLexicalComposerContext4();
+  const lastMarkdownRef = useRef("");
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect4(() => {
+    if (initialMarkdown && initialMarkdown !== lastMarkdownRef.current) {
+      lastMarkdownRef.current = initialMarkdown;
+      editor.update(() => {
+        $convertFromMarkdownString(initialMarkdown, transformers);
+      }, { tag: "initial-load" });
+    }
+  }, [editor, initialMarkdown]);
+  useEffect4(() => {
+    return editor.registerUpdateListener(
+      ({ editorState, dirtyElements, dirtyLeaves, tags }) => {
+        if (dirtyElements.size === 0 && dirtyLeaves.size === 0) return;
+        if (tags.has("initial-load")) return;
+        editorState.read(() => {
+          const markdown = $convertToMarkdownString(transformers);
+          onChangeRef.current?.(markdown);
+        });
+      }
+    );
+  }, [editor]);
+  return null;
+}
+
+// src/theme.ts
+var editorTheme = {
+  ltr: "text-left",
+  rtl: "text-right",
+  placeholder: "text-muted-foreground opacity-50",
+  paragraph: "mb-2",
+  heading: {
+    h1: "text-4xl font-bold mb-4",
+    h2: "text-3xl font-bold mb-3",
+    h3: "text-2xl font-bold mb-2",
+    h4: "text-xl font-bold mb-2",
+    h5: "text-lg font-bold mb-1",
+    h6: "text-base font-bold mb-1"
+  },
+  list: {
+    listitem: "ml-8",
+    listitemChecked: "line-through opacity-50",
+    listitemUnchecked: "",
+    nested: {
+      listitem: "ml-8"
+    },
+    checklist: "zui-checklist",
+    ol: "list-decimal ml-4",
+    ul: "list-disc ml-4"
+  },
+  link: "text-primary underline hover:opacity-80 cursor-pointer",
+  text: {
+    bold: "font-bold",
+    code: "bg-muted px-1.5 py-0.5 rounded font-mono text-sm",
+    italic: "italic",
+    strikethrough: "line-through",
+    subscript: "text-xs align-sub",
+    superscript: "text-xs align-super",
+    underline: "underline",
+    underlineStrikethrough: "underline line-through"
+  },
+  code: "bg-muted rounded-md p-4 font-mono text-sm block my-2 overflow-x-auto",
+  codeHighlight: {
+    atrule: "text-blue-500",
+    attr: "text-yellow-500",
+    boolean: "text-purple-500",
+    builtin: "text-cyan-500",
+    cdata: "text-gray-500",
+    char: "text-green-500",
+    class: "text-yellow-500",
+    "class-name": "text-yellow-500",
+    comment: "text-gray-500",
+    constant: "text-purple-500",
+    deleted: "text-red-500",
+    doctype: "text-gray-500",
+    entity: "text-red-500",
+    function: "text-blue-500",
+    important: "text-red-500",
+    inserted: "text-green-500",
+    keyword: "text-purple-500",
+    namespace: "text-purple-500",
+    number: "text-green-500",
+    operator: "text-gray-500",
+    prolog: "text-gray-500",
+    property: "text-blue-500",
+    punctuation: "text-gray-500",
+    regex: "text-red-500",
+    selector: "text-blue-500",
+    string: "text-green-500",
+    symbol: "text-green-500",
+    tag: "text-red-500",
+    url: "text-blue-500",
+    variable: "text-blue-500"
+  },
+  quote: "border-l-4 border-border pl-4 italic"
+};
+
+// src/MarkdownEditor.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var SYNC_TRANSFORMERS = [CHECK_LIST, ...TRANSFORMERS];
+var SHORTCUT_TRANSFORMERS = TRANSFORMERS.filter((t) => t !== CODE);
+function onError(error) {
+  console.error(error);
+}
+var editorNodes = [
+  HeadingNode,
+  ListNode2,
+  ListItemNode,
+  QuoteNode,
+  CodeNode,
+  CodeHighlightNode,
+  AutoLinkNode,
+  LinkNode
+];
+function ReadOnlyPlugin({ readOnly }) {
+  const [editor] = useLexicalComposerContext5();
+  useEffect5(() => {
+    editor.setEditable(!readOnly);
+  }, [editor, readOnly]);
+  return null;
+}
+function MarkdownEditor({
+  value,
+  onChange,
+  placeholder = "Start writing...",
+  readOnly = false,
+  className,
+  mode = "edit-md",
+  autoFocus = false
+}) {
+  const latestValueRef = useRef2(value ?? "");
+  const [mountKey, setMountKey] = useState(0);
+  const [capturedMarkdown, setCapturedMarkdown] = useState(value ?? "");
+  useEffect5(() => {
+    if (value !== void 0) {
+      latestValueRef.current = value;
+    }
+  }, [value]);
+  const handleTextChange = useCallback(
+    (e) => {
+      const newValue = e.target.value;
+      latestValueRef.current = newValue;
+      onChange?.(newValue);
+    },
+    [onChange]
+  );
+  const handleLexicalChange = useCallback(
+    (newValue) => {
+      latestValueRef.current = newValue;
+      onChange?.(newValue);
+    },
+    [onChange]
+  );
+  const prevModeRef = useRef2(mode);
+  useEffect5(() => {
+    if (prevModeRef.current === "edit-raw" && mode !== "edit-raw") {
+      setCapturedMarkdown(latestValueRef.current);
+      setMountKey((k) => k + 1);
+    }
+    prevModeRef.current = mode;
+  }, [mode]);
+  const initialConfig = useMemo(
+    () => ({
+      namespace: "ZuiTextEditor",
+      theme: editorTheme,
+      onError,
+      nodes: editorNodes
+    }),
+    []
+  );
+  if (mode === "edit-raw") {
+    return /* @__PURE__ */ jsx("div", { className: `zui-text-editor ${className ?? ""}`, children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: "zui-text-editor-textarea",
+        value: value ?? "",
+        onChange: handleTextChange,
+        placeholder,
+        readOnly,
+        autoFocus,
+        spellCheck: false
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(LexicalComposer, { initialConfig, children: /* @__PURE__ */ jsxs("div", { className: `zui-text-editor ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx(
+      RichTextPlugin,
+      {
+        contentEditable: /* @__PURE__ */ jsx(
+          ContentEditable,
+          {
+            className: "zui-text-editor-content",
+            "aria-placeholder": placeholder,
+            placeholder: /* @__PURE__ */ jsx("div", { className: "zui-text-editor-placeholder", children: placeholder })
+          }
+        ),
+        ErrorBoundary: LexicalErrorBoundary
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MarkdownSyncPlugin,
+      {
+        initialMarkdown: mode === "view" ? value ?? "" : capturedMarkdown,
+        onChange: handleLexicalChange,
+        transformers: SYNC_TRANSFORMERS
+      }
+    ),
+    /* @__PURE__ */ jsx(HistoryPlugin, {}),
+    /* @__PURE__ */ jsx(ListPlugin, {}),
+    /* @__PURE__ */ jsx(CheckListPlugin, {}),
+    /* @__PURE__ */ jsx(ChecklistShortcutPlugin, {}),
+    /* @__PURE__ */ jsx(CodeBlockShortcutPlugin, {}),
+    /* @__PURE__ */ jsx(CodeHighlightPlugin, {}),
+    /* @__PURE__ */ jsx(LinkPlugin, {}),
+    /* @__PURE__ */ jsx(MarkdownShortcutPlugin, { transformers: SHORTCUT_TRANSFORMERS }),
+    /* @__PURE__ */ jsx(ReadOnlyPlugin, { readOnly: readOnly || mode === "view" }),
+    autoFocus && /* @__PURE__ */ jsx(AutoFocusPlugin, {})
+  ] }) }, mountKey);
+}
+export {
+  MarkdownEditor
+};

package/dist/styles.css

@@ -0,0 +1,81 @@
+.zui-text-editor {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.zui-text-editor-content {
+  min-height: 100%;
+  padding: 1.5rem 2rem;
+  outline: none;
+}
+
+.zui-text-editor-placeholder {
+  position: absolute;
+  top: 1.5rem;
+  left: 2rem;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* Checklist styles */
+.zui-checklist {
+  list-style: none;
+  margin-left: 0;
+  padding-left: 0;
+}
+
+.zui-checklist li[role='checkbox'] {
+  position: relative;
+  padding-left: 1.75rem;
+  margin-left: 0;
+  cursor: pointer;
+  list-style: none;
+}
+
+.zui-checklist li[role='checkbox']::before {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0.25em;
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid currentColor;
+  border-radius: 0.2rem;
+  opacity: 0.5;
+  background: transparent;
+}
+
+.zui-checklist li[role='checkbox'][aria-checked='true']::before {
+  background: currentColor;
+  opacity: 0.5;
+}
+
+.zui-checklist li[role='checkbox'][aria-checked='true']::after {
+  content: '';
+  position: absolute;
+  left: 0.3rem;
+  top: 0.35em;
+  width: 0.4rem;
+  height: 0.7rem;
+  border: solid white;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+
+.zui-text-editor-textarea {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  padding: 1.5rem 2rem;
+  outline: none;
+  resize: none;
+  background: transparent;
+  color: inherit;
+  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
+    'Liberation Mono', monospace;
+  font-size: 0.875rem;
+  line-height: 1.6;
+  border: none;
+}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@zuilib/text-editor",
+  "version": "0.0.0",
+  "description": "ZUI — A markdown editor component wrapping Lexical",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": ["**/*.css"],
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsup"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css",
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "lexical": "^0.35.0",
+    "@lexical/react": "^0.35.0",
+    "@lexical/markdown": "^0.35.0",
+    "@lexical/rich-text": "^0.35.0",
+    "@lexical/code": "^0.35.0",
+    "@lexical/list": "^0.35.0",
+    "@lexical/link": "^0.35.0"
+  },
+  "dependencies": {
+    "@zuilib/core": "^0.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0 || ^19.0.0",
+    "@types/react-dom": "^18.0.0 || ^19.0.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "lexical": "^0.35.0",
+    "@lexical/react": "^0.35.0",
+    "@lexical/markdown": "^0.35.0",
+    "@lexical/rich-text": "^0.35.0",
+    "@lexical/code": "^0.35.0",
+    "@lexical/list": "^0.35.0",
+    "@lexical/link": "^0.35.0"
+  },
+  "keywords": [
+    "lexical",
+    "markdown",
+    "editor",
+    "zui",
+    "design-system",
+    "react",
+    "typescript"
+  ]
+}