@haklex/rich-renderers-edit 0.0.71 → 0.0.73

package/dist/TagEditRenderer.d.ts

@@ -0,0 +1,3 @@
+import { TagRendererProps } from '@haklex/rich-editor/static';
+export declare function TagEditRenderer(props: TagRendererProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TagEditRenderer.d.ts.map

package/dist/TagEditRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagEditRenderer.d.ts","sourceRoot":"","sources":["../src/TagEditRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAMnE,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,2CAQtD"}

package/dist/config-B6vDEQ9v.js

@@ -0,0 +1,144 @@
+import { FootnoteRenderer } from "@haklex/rich-editor/renderers";
+import { CodeSnippetEditRenderer } from "@haklex/rich-ext-code-snippet";
+import { GalleryEditRenderer } from "@haklex/rich-ext-gallery";
+import { AlertEditRenderer } from "@haklex/rich-renderer-alert";
+import { BannerEditRenderer } from "@haklex/rich-renderer-banner";
+import { CodeBlockEditRenderer } from "@haklex/rich-renderer-codeblock";
+import { ImageEditRenderer } from "@haklex/rich-renderer-image";
+import { MentionEditRenderer } from "@haklex/rich-renderer-mention";
+import { MermaidEditRenderer } from "@haklex/rich-renderer-mermaid";
+import { RubyEditRenderer } from "@haklex/rich-renderer-ruby";
+import { VideoEditRenderer } from "@haklex/rich-renderer-video";
+import { enhancedRendererConfig } from "@haklex/rich-renderers";
+import { jsx } from "react/jsx-runtime";
+import { useRendererMode } from "@haklex/rich-editor";
+import { TagRenderer, getTagBgColor } from "@haklex/rich-editor/static";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getNearestNodeFromDOMNode } from "lexical";
+import { useRef, useState, useEffect, useCallback } from "react";
+function TagEditRenderer(props) {
+  const mode = useRendererMode();
+  if (mode !== "editor") {
+    return /* @__PURE__ */ jsx(TagRenderer, { ...props });
+  }
+  return /* @__PURE__ */ jsx(TagEditRendererInner, { ...props });
+}
+function TagEditRendererInner({ text }) {
+  const [editor] = useLexicalComposerContext();
+  const editable = editor.isEditable();
+  const wrapperRef = useRef(null);
+  const inputRef = useRef(null);
+  const [editing, setEditing] = useState(false);
+  const [editText, setEditText] = useState(text);
+  useEffect(() => {
+    setEditText(text);
+  }, [text]);
+  useEffect(() => {
+    if (editing) {
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [editing]);
+  const commitChanges = useCallback(() => {
+    const trimmed = editText.trim();
+    if (!trimmed || trimmed === text) {
+      setEditText(text);
+      setEditing(false);
+      return;
+    }
+    if (!wrapperRef.current) return;
+    editor.update(() => {
+      const node = $getNearestNodeFromDOMNode(wrapperRef.current);
+      if (!node) return;
+      const writable = node.getWritable();
+      writable.__text = trimmed;
+    });
+    setEditing(false);
+  }, [editor, editText, text]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitChanges();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setEditText(text);
+        setEditing(false);
+      }
+    },
+    [commitChanges, text]
+  );
+  if (!editable) {
+    return /* @__PURE__ */ jsx(TagRenderer, { text });
+  }
+  const bgColor = getTagBgColor(editing ? editText : text);
+  if (editing) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "rich-tag",
+        ref: wrapperRef,
+        style: { backgroundColor: bgColor, display: "inline-flex", alignItems: "center" },
+        children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            style: {
+              appearance: "none",
+              border: "none",
+              backgroundColor: "transparent",
+              color: "inherit",
+              font: "inherit",
+              fontSize: "inherit",
+              lineHeight: "inherit",
+              padding: 0,
+              margin: 0,
+              outline: "none",
+              width: `${Math.max(editText.length, 1)}ch`,
+              minWidth: "2ch"
+            },
+            type: "text",
+            value: editText,
+            onBlur: commitChanges,
+            onChange: (e) => setEditText(e.target.value),
+            onKeyDown: handleKeyDown,
+            onMouseDown: (e) => e.stopPropagation()
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "rich-tag",
+      ref: wrapperRef,
+      style: { backgroundColor: bgColor, cursor: "pointer" },
+      onClick: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setEditing(true);
+      },
+      children: text
+    }
+  );
+}
+const enhancedEditRendererConfig = {
+  ...enhancedRendererConfig,
+  Alert: AlertEditRenderer,
+  Banner: BannerEditRenderer,
+  CodeBlock: CodeBlockEditRenderer,
+  Footnote: FootnoteRenderer,
+  Gallery: GalleryEditRenderer,
+  Image: ImageEditRenderer,
+  Mention: MentionEditRenderer,
+  Ruby: RubyEditRenderer,
+  Mermaid: MermaidEditRenderer,
+  Tag: TagEditRenderer,
+  Video: VideoEditRenderer,
+  CodeSnippet: CodeSnippetEditRenderer
+};
+export {
+  TagEditRenderer as T,
+  enhancedEditRendererConfig as e
+};

package/dist/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAc1D,eAAO,MAAM,0BAA0B,EAAE,cAaxC,CAAC"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAgB1D,eAAO,MAAM,0BAA0B,EAAE,cAcxC,CAAC"}

package/dist/config.mjs

@@ -1,29 +1,16 @@
-import { FootnoteRenderer } from "@haklex/rich-editor/renderers";
-import { CodeSnippetEditRenderer } from "@haklex/rich-ext-code-snippet";
-import { GalleryEditRenderer } from "@haklex/rich-ext-gallery";
-import { AlertEditRenderer } from "@haklex/rich-renderer-alert";
-import { BannerEditRenderer } from "@haklex/rich-renderer-banner";
-import { CodeBlockEditRenderer } from "@haklex/rich-renderer-codeblock";
-import { ImageEditRenderer } from "@haklex/rich-renderer-image";
-import { MentionEditRenderer } from "@haklex/rich-renderer-mention";
-import { MermaidEditRenderer } from "@haklex/rich-renderer-mermaid";
-import { RubyEditRenderer } from "@haklex/rich-renderer-ruby";
-import { VideoEditRenderer } from "@haklex/rich-renderer-video";
-import { enhancedRendererConfig } from "@haklex/rich-renderers";
-const enhancedEditRendererConfig = {
-  ...enhancedRendererConfig,
-  Alert: AlertEditRenderer,
-  Banner: BannerEditRenderer,
-  CodeBlock: CodeBlockEditRenderer,
-  Footnote: FootnoteRenderer,
-  Gallery: GalleryEditRenderer,
-  Image: ImageEditRenderer,
-  Mention: MentionEditRenderer,
-  Ruby: RubyEditRenderer,
-  Mermaid: MermaidEditRenderer,
-  Video: VideoEditRenderer,
-  CodeSnippet: CodeSnippetEditRenderer
-};
+import "@haklex/rich-editor/renderers";
+import "@haklex/rich-ext-code-snippet";
+import "@haklex/rich-ext-gallery";
+import "@haklex/rich-renderer-alert";
+import "@haklex/rich-renderer-banner";
+import "@haklex/rich-renderer-codeblock";
+import "@haklex/rich-renderer-image";
+import "@haklex/rich-renderer-mention";
+import "@haklex/rich-renderer-mermaid";
+import "@haklex/rich-renderer-ruby";
+import "@haklex/rich-renderer-video";
+import "@haklex/rich-renderers";
+import { e } from "./config-B6vDEQ9v.js";
 export {
-  enhancedEditRendererConfig
+  e as enhancedEditRendererConfig
 };

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { ImageEditRenderer } from '@haklex/rich-renderer-image';
 export { MentionEditRenderer } from '@haklex/rich-renderer-mention';
 export { MermaidEditRenderer } from '@haklex/rich-renderer-mermaid';
 export { RubyEditRenderer } from '@haklex/rich-renderer-ruby';
+export { TagEditRenderer } from './TagEditRenderer';
 export { VideoEditRenderer } from '@haklex/rich-renderer-video';
 export type { ExcalidrawEditRendererProps } from '@haklex/rich-ext-excalidraw';
 export { $createExcalidrawEditNode, $isExcalidrawEditNode, ExcalidrawEditNode, ExcalidrawEditRenderer, ExcalidrawPlugin, INSERT_EXCALIDRAW_COMMAND, } from '@haklex/rich-ext-excalidraw';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA;AACjF,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,+BAA+B,CAAA;AAGtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAA;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAG/D,YAAY,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACrB,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,6BAA6B,CAAA;AAGpC,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,0BAA0B,CAAA;AAGjC,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAC9D,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,WAAW,EACX,oBAAoB,GACrB,MAAM,wBAAwB,CAAA;AAG/B,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,iBAAiB,GAClB,MAAM,6BAA6B,CAAA;AAGpC,YAAY,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAGvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAGpE,YAAY,EACV,4BAA4B,EAC5B,wBAAwB,GACzB,MAAM,gCAAgC,CAAA;AACvC,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,IAAI,gBAAgB,EAC5B,mBAAmB,GACpB,MAAM,gCAAgC,CAAA;AAGvC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,mBAAmB,GACpB,MAAM,6BAA6B,CAAA;AAGpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EAAE,4BAA4B,EAAE,MAAM,+BAA+B,CAAA;AACjF,OAAO,EACL,0BAA0B,EAC1B,sBAAsB,EACtB,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,GACxB,MAAM,+BAA+B,CAAA;AAGtC,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAA;AACjE,OAAO,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAA;AACvE,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAA;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAA;AAC7D,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAG/D,YAAY,EAAE,2BAA2B,EAAE,MAAM,6BAA6B,CAAA;AAC9E,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACrB,kBAAkB,EAClB,sBAAsB,EACtB,gBAAgB,EAChB,yBAAyB,GAC1B,MAAM,6BAA6B,CAAA;AAGpC,OAAO,EACL,sBAAsB,EACtB,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,0BAA0B,CAAA;AAGjC,YAAY,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAA;AAC9D,OAAO,EACL,oBAAoB,EACpB,gBAAgB,EAChB,aAAa,EACb,cAAc,EACd,WAAW,EACX,oBAAoB,GACrB,MAAM,wBAAwB,CAAA;AAG/B,YAAY,EACV,sBAAsB,EACtB,kBAAkB,GACnB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,iBAAiB,GAClB,MAAM,6BAA6B,CAAA;AAGpC,YAAY,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAA;AAC1E,OAAO,EACL,qBAAqB,EACrB,eAAe,EACf,aAAa,EACb,aAAa,EACb,eAAe,GAChB,MAAM,gCAAgC,CAAA;AAGvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,kCAAkC,CAAA;AAGpE,YAAY,EACV,4BAA4B,EAC5B,wBAAwB,GACzB,MAAM,gCAAgC,CAAA;AACvC,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,iBAAiB,EACjB,QAAQ,IAAI,gBAAgB,EAC5B,mBAAmB,GACpB,MAAM,gCAAgC,CAAA;AAGvC,OAAO,EACL,kBAAkB,EAClB,cAAc,EACd,mBAAmB,GACpB,MAAM,6BAA6B,CAAA;AAGpC,OAAO,EAAE,0BAA0B,EAAE,MAAM,UAAU,CAAA"}

package/dist/index.mjs

@@ -6,6 +6,7 @@ import { ImageEditRenderer } from "@haklex/rich-renderer-image";
 import { MentionEditRenderer } from "@haklex/rich-renderer-mention";
 import { MermaidEditRenderer } from "@haklex/rich-renderer-mermaid";
 import { RubyEditRenderer } from "@haklex/rich-renderer-ruby";
+import { T, e } from "./config-B6vDEQ9v.js";
 import { VideoEditRenderer } from "@haklex/rich-renderer-video";
 import { $createExcalidrawEditNode, $isExcalidrawEditNode, ExcalidrawEditNode, ExcalidrawEditRenderer, ExcalidrawPlugin, INSERT_EXCALIDRAW_COMMAND } from "@haklex/rich-ext-excalidraw";
 import { $createGalleryEditNode, $isGalleryEditNode, GalleryEditNode, GalleryEditRenderer, galleryEditNodes } from "@haklex/rich-ext-gallery";
@@ -15,7 +16,6 @@ import { SlashMenuItem, SlashMenuList, SlashMenuPlugin, collectNodeSlashItems, g
 import { BlockHandlePlugin } from "@haklex/rich-plugin-block-handle";
 import { $createLinkCardEditNode, ConvertToLinkCardAction, LinkCardEditNode, PasteLinkCardPlugin, linkCardEditNodes, matchUrl } from "@haklex/rich-renderer-linkcard";
 import { KaTeXBlockEditNode, KaTeXInlineEditNode, katexEditNodes } from "@haklex/rich-renderer-katex";
-import { enhancedEditRendererConfig } from "./config.mjs";
 export {
   $createCodeSnippetEditNode,
   $createEmbedEditNode,
@@ -55,12 +55,13 @@ export {
   SlashMenuItem,
   SlashMenuList,
   SlashMenuPlugin,
+  T as TagEditRenderer,
   VideoEditRenderer,
   builtinPlatforms,
   codeSnippetEditNodes,
   collectNodeSlashItems,
   embedEditNodes,
-  enhancedEditRendererConfig,
+  e as enhancedEditRendererConfig,
   galleryEditNodes,
   getAllPlatforms,
   getBuiltinItems,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@haklex/rich-renderers-edit",
-  "version": "0.0.71",
+  "version": "0.0.73",
   "description": "Edit renderers aggregator for haklex rich editor",
   "repository": {
     "type": "git",
@@ -64,25 +64,25 @@
     "dist"
   ],
   "dependencies": {
-    "@haklex/rich-editor": "0.0.71",
-    "@haklex/rich-ext-embed": "0.0.71",
-    "@haklex/rich-ext-code-snippet": "0.0.71",
-    "@haklex/rich-ext-excalidraw": "0.0.71",
-    "@haklex/rich-ext-gallery": "0.0.71",
-    "@haklex/rich-plugin-block-handle": "0.0.71",
-    "@haklex/rich-plugin-mention": "0.0.71",
-    "@haklex/rich-plugin-slash-menu": "0.0.71",
-    "@haklex/rich-renderer-alert": "0.0.71",
-    "@haklex/rich-renderer-codeblock": "0.0.71",
-    "@haklex/rich-renderer-banner": "0.0.71",
-    "@haklex/rich-renderer-image": "0.0.71",
-    "@haklex/rich-renderer-katex": "0.0.71",
-    "@haklex/rich-renderer-mention": "0.0.71",
-    "@haklex/rich-renderer-mermaid": "0.0.71",
-    "@haklex/rich-renderer-ruby": "0.0.71",
-    "@haklex/rich-renderer-linkcard": "0.0.71",
-    "@haklex/rich-renderer-video": "0.0.71",
-    "@haklex/rich-renderers": "0.0.71"
+    "@haklex/rich-editor": "0.0.73",
+    "@haklex/rich-ext-embed": "0.0.73",
+    "@haklex/rich-ext-excalidraw": "0.0.73",
+    "@haklex/rich-plugin-mention": "0.0.73",
+    "@haklex/rich-ext-gallery": "0.0.73",
+    "@haklex/rich-plugin-slash-menu": "0.0.73",
+    "@haklex/rich-renderer-alert": "0.0.73",
+    "@haklex/rich-ext-code-snippet": "0.0.73",
+    "@haklex/rich-renderer-banner": "0.0.73",
+    "@haklex/rich-renderer-codeblock": "0.0.73",
+    "@haklex/rich-renderer-image": "0.0.73",
+    "@haklex/rich-renderer-katex": "0.0.73",
+    "@haklex/rich-renderer-linkcard": "0.0.73",
+    "@haklex/rich-renderer-mention": "0.0.73",
+    "@haklex/rich-renderer-mermaid": "0.0.73",
+    "@haklex/rich-renderer-ruby": "0.0.73",
+    "@haklex/rich-renderer-video": "0.0.73",
+    "@haklex/rich-plugin-block-handle": "0.0.73",
+    "@haklex/rich-renderers": "0.0.73"
   },
   "devDependencies": {
     "@lexical/react": "^0.41.0",