@meta-1/editor 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meta-1/editor",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "keywords": [
     "meta",
     "tailwindcss",

package/src/editor/index.tsx

@@ -69,34 +69,24 @@ export function EditorContentArea() {
 export type Meta1EditorProps = Meta1EditorOptions & {
   /** Editor instance created by Meta1Editor.useEditor() */
   editor?: Meta1EditorInstance;
-  /** Controlled value - works with FormItem */
-  value?: Meta1EditorValue;
-  /** onChange callback - works with FormItem */
-  onChange?: (content: Meta1EditorValue) => void;
 };
 
 const Meta1EditorInner: FC<Meta1EditorProps> = (props) => {
-  const { editor: editorInstance, value, onChange, ...options } = props;
+  const { editor: editorInstance, ...options } = props;
 
   // Create the actual tiptap editor with value/onChange support
-  const tiptapEditor = useMeta1Editor({
-    ...options,
-    value,
-    onChange,
-  });
+  const tiptapEditor = useMeta1Editor(options);
 
   // Update the instance reference when editor changes
   useEffect(() => {
     if (editorInstance?._setEditor) {
       editorInstance._setEditor(tiptapEditor);
-      if (options.contentType) {
-        editorInstance._contentType = options.contentType;
-      }
+      editorInstance._nodeExclude = options.nodeExclude;
     }
     return () => {
       editorInstance?._setEditor?.(null);
     };
-  }, [tiptapEditor, editorInstance, options.contentType]);
+  }, [tiptapEditor, editorInstance, options.nodeExclude]);
 
   if (!tiptapEditor) {
     return null;

package/src/hooks/use-editor.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useRef } from "react";
 import { Highlight } from "@tiptap/extension-highlight";
 import { TaskItem, TaskList } from "@tiptap/extension-list";
 import { Mathematics } from "@tiptap/extension-mathematics";
@@ -46,6 +46,10 @@ export type Meta1EditorOptions = {
   contentType?: ContentType;
   editable?: boolean;
   imageUpload?: ImageUploadOptions;
+  value?: Meta1EditorValue;
+  onChange?: (content: Meta1EditorValue) => void;
+  /** Node types to exclude from output (e.g., ['imageUpload']) */
+  nodeExclude?: string[];
 };
 
 /**
@@ -54,13 +58,13 @@ export type Meta1EditorOptions = {
 export interface Meta1EditorInstance {
   /** Internal: set the actual editor reference */
   _setEditor?: (editor: Editor | null) => void;
-  /** Internal: set contentType for value conversion */
-  _contentType?: ContentType;
+  /** Internal: set nodeExclude for filtering */
+  _nodeExclude?: string[];
   /** Get the underlying tiptap Editor instance */
   getEditor: () => Editor | null;
-  /** Get current content as JSON */
+  /** Get current content as JSON (with nodeExclude filtering applied) */
   getJSON: () => Record<string, unknown> | null;
-  /** Get current content as HTML */
+  /** Get current content as HTML (with nodeExclude filtering applied) */
   getHTML: () => string | null;
   /** Get current content as Markdown */
   getMarkdown: () => string | null;
@@ -70,13 +74,63 @@ export interface Meta1EditorInstance {
   isEmpty: () => boolean;
 }
 
-const getValueFromEditor = (editor: Editor, contentType: ContentType): Meta1EditorValue => {
+/**
+ * Filter out excluded nodes from JSON content recursively
+ */
+const filterJsonNodes = (json: Record<string, unknown>, excludeTypes: string[]): Record<string, unknown> | null => {
+  if (excludeTypes.includes(json.type as string)) {
+    return null;
+  }
+
+  if (Array.isArray(json.content)) {
+    const filteredContent = json.content
+      .map((node) => filterJsonNodes(node as Record<string, unknown>, excludeTypes))
+      .filter((node): node is Record<string, unknown> => node !== null);
+
+    return {
+      ...json,
+      content: filteredContent,
+    };
+  }
+
+  return json;
+};
+
+/**
+ * Filter out excluded nodes from HTML content
+ */
+const filterHtmlNodes = (html: string, excludeTypes: string[]): string => {
+  // Create patterns for each excluded type
+  // imageUpload renders as: <div data-type="image-upload" ...></div>
+  let result = html;
+  for (const type of excludeTypes) {
+    // Convert camelCase to kebab-case for data-type attribute
+    const kebabType = type.replace(/([A-Z])/g, "-$1").toLowerCase();
+    // Match self-closing or content divs with data-type
+    const pattern = new RegExp(`<div[^>]*data-type="${kebabType}"[^>]*>.*?</div>`, "gi");
+    result = result.replace(pattern, "");
+  }
+  return result;
+};
+
+const getValueFromEditor = (editor: Editor, contentType: ContentType, nodeExclude?: string[]): Meta1EditorValue => {
   switch (contentType) {
-    case "json":
-      return editor.getJSON();
-    case "html":
-      return editor.getHTML();
+    case "json": {
+      const json = editor.getJSON();
+      if (nodeExclude?.length) {
+        return filterJsonNodes(json, nodeExclude) ?? { type: "doc", content: [] };
+      }
+      return json;
+    }
+    case "html": {
+      const html = editor.getHTML();
+      if (nodeExclude?.length) {
+        return filterHtmlNodes(html, nodeExclude);
+      }
+      return html;
+    }
     case "markdown":
+      // Markdown doesn't output unsupported nodes, so no filtering needed
       return editor.getMarkdown();
     default:
       return JSON.stringify(editor.getJSON());
@@ -99,6 +153,7 @@ const getValueFromEditor = (editor: Editor, contentType: ContentType): Meta1Edit
 export const useEditorInstance = (): Meta1EditorInstance => {
   const editorRef = useRef<Editor | null>(null);
   const instanceRef = useRef<Meta1EditorInstance | null>(null);
+  const nodeExcludeRef = useRef<string[]>([]);
 
   const _setEditor = useCallback((editor: Editor | null) => {
     editorRef.current = editor;
@@ -107,10 +162,29 @@ export const useEditorInstance = (): Meta1EditorInstance => {
   if (!instanceRef.current) {
     instanceRef.current = {
       _setEditor,
-      _contentType: "json",
+      get _nodeExclude() {
+        return nodeExcludeRef.current;
+      },
+      set _nodeExclude(value: string[] | undefined) {
+        nodeExcludeRef.current = value ?? [];
+      },
       getEditor: () => editorRef.current,
-      getJSON: () => editorRef.current?.getJSON() ?? null,
-      getHTML: () => editorRef.current?.getHTML() ?? null,
+      getJSON: () => {
+        if (!editorRef.current) return null;
+        const json = editorRef.current.getJSON();
+        if (nodeExcludeRef.current.length) {
+          return filterJsonNodes(json, nodeExcludeRef.current) ?? { type: "doc", content: [] };
+        }
+        return json;
+      },
+      getHTML: () => {
+        if (!editorRef.current) return null;
+        const html = editorRef.current.getHTML();
+        if (nodeExcludeRef.current.length) {
+          return filterHtmlNodes(html, nodeExcludeRef.current);
+        }
+        return html;
+      },
       getMarkdown: () => editorRef.current?.getMarkdown() ?? null,
       focus: () => editorRef.current?.commands.focus(),
       isEmpty: () => editorRef.current?.isEmpty ?? true,
@@ -120,10 +194,7 @@ export const useEditorInstance = (): Meta1EditorInstance => {
   return instanceRef.current;
 };
 
-export type UseMeta1EditorProps = Meta1EditorOptions & {
-  value?: Meta1EditorValue;
-  onChange?: (content: Meta1EditorValue) => void;
-};
+export type UseMeta1EditorProps = Meta1EditorOptions;
 
 /**
  * Internal hook that creates the actual tiptap editor.
@@ -139,6 +210,7 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     contentType = "json",
     editable = true,
     imageUpload,
+    nodeExclude,
   } = props;
   const isUpdatingFromPropsRef = useRef(false);
 
@@ -148,7 +220,7 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     editable,
     onUpdate: ({ editor }) => {
       if (!isUpdatingFromPropsRef.current) {
-        onChange?.(getValueFromEditor(editor, contentType));
+        onChange?.(getValueFromEditor(editor, contentType, nodeExclude));
       }
     },
     editorProps: {
@@ -210,28 +282,5 @@ export const useMeta1Editor = (props: UseMeta1EditorProps) => {
     immediatelyRender: false,
   });
 
-  // Sync value from props to editor
-  useEffect(() => {
-    if (!editor || value === undefined) {
-      return;
-    }
-
-    const currentContent = getValueFromEditor(editor, contentType);
-    const isContentEqual =
-      typeof value === "string" && typeof currentContent === "string"
-        ? value === currentContent
-        : JSON.stringify(value) === JSON.stringify(currentContent);
-
-    if (!isContentEqual) {
-      queueMicrotask(() => {
-        isUpdatingFromPropsRef.current = true;
-        editor.commands.setContent(value);
-        requestAnimationFrame(() => {
-          isUpdatingFromPropsRef.current = false;
-        });
-      });
-    }
-  }, [editor, value, contentType]);
-
   return editor;
 };