notra-editor 0.1.0

package/dist/index.cjs

@@ -0,0 +1,183 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  NotraEditor: () => NotraEditor,
+  NotraReader: () => NotraReader
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/notra-editor.tsx
+var import_react3 = require("@tiptap/react");
+
+// src/hooks/use-markdown-editor.ts
+var import_react = require("@tiptap/react");
+var import_react2 = require("react");
+
+// src/extensions/shared.ts
+var import_extension_list = require("@tiptap/extension-list");
+var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
+var starterKitBaseConfig = {
+  heading: { levels: [1, 2, 3, 4, 5, 6] },
+  link: {
+    openOnClick: false,
+    autolink: true
+  },
+  // Disable StarterKit's built-in list handling; use @tiptap/extension-list instead
+  bulletList: false,
+  orderedList: false,
+  listItem: false,
+  listKeymap: false
+};
+var sharedExtensions = [
+  import_starter_kit.default.configure({
+    ...starterKitBaseConfig,
+    dropcursor: false,
+    gapcursor: false,
+    undoRedo: false,
+    trailingNode: false
+  }),
+  import_extension_list.ListKit
+];
+
+// src/extensions/editor.ts
+var import_extension_list2 = require("@tiptap/extension-list");
+var import_starter_kit2 = __toESM(require("@tiptap/starter-kit"), 1);
+var import_tiptap_markdown = require("tiptap-markdown");
+var editorExtensions = [
+  import_starter_kit2.default.configure(starterKitBaseConfig),
+  import_extension_list2.ListKit,
+  import_tiptap_markdown.Markdown.configure({
+    html: false,
+    transformPastedText: true,
+    transformCopiedText: true
+  })
+];
+
+// src/hooks/use-markdown-editor.ts
+function getMarkdown(storage) {
+  return storage.markdown.getMarkdown();
+}
+function useMarkdownEditor({
+  value,
+  onChange,
+  editable = true
+}) {
+  const externalValue = (0, import_react2.useRef)(value);
+  const onChangeRef = (0, import_react2.useRef)(onChange);
+  onChangeRef.current = onChange;
+  const editor = (0, import_react.useEditor)({
+    extensions: editorExtensions,
+    editable,
+    content: value,
+    onUpdate({ editor: editor2 }) {
+      const md = getMarkdown(
+        editor2.storage
+      );
+      externalValue.current = md;
+      onChangeRef.current(md);
+    }
+  });
+  (0, import_react2.useEffect)(() => {
+    if (!editor) return;
+    if (value === externalValue.current) return;
+    externalValue.current = value;
+    editor.commands.setContent(value);
+  }, [value, editor]);
+  (0, import_react2.useEffect)(() => {
+    if (!editor) return;
+    editor.setEditable(editable);
+  }, [editable, editor]);
+  return { editor };
+}
+
+// src/notra-editor.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function NotraEditor({
+  value,
+  onChange,
+  placeholder,
+  readOnly = false,
+  className
+}) {
+  const { editor } = useMarkdownEditor({
+    value,
+    onChange,
+    placeholder,
+    editable: !readOnly
+  });
+  const classNames = ["notra", "notra-editor", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: classNames, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react3.EditorContent, { editor }) });
+}
+
+// src/notra-reader.tsx
+var import_react4 = require("@tiptap/static-renderer/pm/react");
+
+// src/utils/markdown-to-json.ts
+var import_core = require("@tiptap/core");
+var import_tiptap_markdown2 = require("tiptap-markdown");
+var parserExtensions = [
+  ...sharedExtensions,
+  import_tiptap_markdown2.Markdown.configure({ html: false })
+];
+var parserEditor = null;
+function getParserEditor() {
+  if (!parserEditor) {
+    parserEditor = new import_core.Editor({
+      extensions: parserExtensions,
+      content: ""
+    });
+  }
+  return parserEditor;
+}
+function markdownToJSON(markdown) {
+  const editor = getParserEditor();
+  editor.commands.setContent(markdown);
+  return editor.getJSON();
+}
+
+// src/notra-reader.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function NotraReader({ content, className }) {
+  const json = markdownToJSON(content);
+  const rendered = (0, import_react4.renderToReactElement)({
+    extensions: sharedExtensions,
+    content: json
+  });
+  const classNames = ["notra", "notra-reader", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: classNames, children: rendered });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NotraEditor,
+  NotraReader
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/notra-editor.tsx","../src/hooks/use-markdown-editor.ts","../src/extensions/shared.ts","../src/extensions/editor.ts","../src/notra-reader.tsx","../src/utils/markdown-to-json.ts"],"sourcesContent":["export { NotraEditor } from './notra-editor';\nexport type { NotraEditorProps } from './notra-editor';\n\nexport { NotraReader } from './notra-reader';\nexport type { NotraReaderProps } from './notra-reader';\n","import { EditorContent } from '@tiptap/react';\n\nimport { useMarkdownEditor } from './hooks/use-markdown-editor';\n\nexport interface NotraEditorProps {\n\t/** Markdown content (source of truth) */\n\tvalue: string;\n\t/** Called when content changes, receives updated Markdown */\n\tonChange: (value: string) => void;\n\t/** Placeholder text shown when editor is empty */\n\tplaceholder?: string;\n\t/** Disable editing */\n\treadOnly?: boolean;\n\t/** Additional CSS class on the wrapper element */\n\tclassName?: string;\n}\n\nexport function NotraEditor({\n\tvalue,\n\tonChange,\n\tplaceholder,\n\treadOnly = false,\n\tclassName\n}: NotraEditorProps) {\n\tconst { editor } = useMarkdownEditor({\n\t\tvalue,\n\t\tonChange,\n\t\tplaceholder,\n\t\teditable: !readOnly\n\t});\n\n\tconst classNames = ['notra', 'notra-editor', className]\n\t\t.filter(Boolean)\n\t\t.join(' ');\n\n\treturn (\n\t\t<div className={classNames}>\n\t\t\t<EditorContent editor={editor} />\n\t\t</div>\n\t);\n}\n","import { useEditor } from '@tiptap/react';\nimport { useEffect, useRef } from 'react';\n\nimport { editorExtensions } from '../extensions';\n\nimport type { MarkdownStorage } from 'tiptap-markdown';\n\nexport interface UseMarkdownEditorOptions {\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tplaceholder?: string;\n\teditable?: boolean;\n}\n\nfunction getMarkdown(storage: Record<string, unknown>): string {\n\treturn (storage.markdown as MarkdownStorage).getMarkdown();\n}\n\nexport function useMarkdownEditor({\n\tvalue,\n\tonChange,\n\teditable = true\n}: UseMarkdownEditorOptions) {\n\tconst externalValue = useRef(value);\n\tconst onChangeRef = useRef(onChange);\n\n\tonChangeRef.current = onChange;\n\n\tconst editor = useEditor({\n\t\textensions: editorExtensions,\n\t\teditable,\n\t\tcontent: value,\n\t\tonUpdate({ editor }) {\n\t\t\tconst md = getMarkdown(\n\t\t\t\teditor.storage as unknown as Record<string, unknown>\n\t\t\t);\n\n\t\t\texternalValue.current = md;\n\t\t\tonChangeRef.current(md);\n\t\t}\n\t});\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tif (value === externalValue.current) return;\n\n\t\texternalValue.current = value;\n\t\teditor.commands.setContent(value);\n\t}, [value, editor]);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\teditor.setEditable(editable);\n\t}, [editable, editor]);\n\n\treturn { editor };\n}\n","import { ListKit } from '@tiptap/extension-list';\nimport StarterKit, { type StarterKitOptions } from '@tiptap/starter-kit';\n\n// Shared StarterKit config: content nodes/marks, no lists (use ListKit instead)\nexport const starterKitBaseConfig: Partial<StarterKitOptions> = {\n\theading: { levels: [1, 2, 3, 4, 5, 6] },\n\tlink: {\n\t\topenOnClick: false,\n\t\tautolink: true\n\t},\n\t// Disable StarterKit's built-in list handling; use @tiptap/extension-list instead\n\tbulletList: false,\n\torderedList: false,\n\tlistItem: false,\n\tlistKeymap: false\n};\n\n// Content model extensions — shared by editor and reader\n// No interactive features (dropcursor, gapcursor, undoRedo, trailingNode)\nexport const sharedExtensions = [\n\tStarterKit.configure({\n\t\t...starterKitBaseConfig,\n\t\tdropcursor: false,\n\t\tgapcursor: false,\n\t\tundoRedo: false,\n\t\ttrailingNode: false\n\t}),\n\tListKit\n];\n","import { ListKit } from '@tiptap/extension-list';\nimport StarterKit from '@tiptap/starter-kit';\nimport { Markdown } from 'tiptap-markdown';\n\nimport { starterKitBaseConfig } from './shared';\n\n// Editor extensions = shared content model + interactive features + Markdown\nexport const editorExtensions = [\n\tStarterKit.configure(starterKitBaseConfig),\n\tListKit,\n\tMarkdown.configure({\n\t\thtml: false,\n\t\ttransformPastedText: true,\n\t\ttransformCopiedText: true\n\t})\n];\n","import { renderToReactElement } from '@tiptap/static-renderer/pm/react';\n\nimport { sharedExtensions } from './extensions';\nimport { markdownToJSON } from './utils/markdown-to-json';\n\nexport interface NotraReaderProps {\n\t/** Markdown content to render */\n\tcontent: string;\n\t/** Additional CSS class on the wrapper element */\n\tclassName?: string;\n}\n\nexport function NotraReader({ content, className }: NotraReaderProps) {\n\tconst json = markdownToJSON(content);\n\n\tconst rendered = renderToReactElement({\n\t\textensions: sharedExtensions,\n\t\tcontent: json\n\t});\n\n\tconst classNames = ['notra', 'notra-reader', className]\n\t\t.filter(Boolean)\n\t\t.join(' ');\n\n\treturn <div className={classNames}>{rendered}</div>;\n}\n","import { Editor } from '@tiptap/core';\nimport { Markdown } from 'tiptap-markdown';\n\nimport { sharedExtensions } from '../extensions';\n\n// Parser needs shared content model + Markdown for markdown→JSON conversion\n// No clipboard features needed (transformPastedText/transformCopiedText are editor-only)\nconst parserExtensions = [\n\t...sharedExtensions,\n\tMarkdown.configure({ html: false })\n];\n\nlet parserEditor: Editor | null = null;\n\nfunction getParserEditor(): Editor {\n\tif (!parserEditor) {\n\t\tparserEditor = new Editor({\n\t\t\textensions: parserExtensions,\n\t\t\tcontent: ''\n\t\t});\n\t}\n\n\treturn parserEditor;\n}\n\n/**\n * Convert a Markdown string to Tiptap-compatible JSON (ProseMirror document).\n * Uses a singleton headless Tiptap editor for parsing.\n */\nexport function markdownToJSON(markdown: string): Record<string, unknown> {\n\tconst editor = getParserEditor();\n\n\teditor.commands.setContent(markdown);\n\n\treturn editor.getJSON() as Record<string, unknown>;\n}\n"],"mappings":"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","names":["import_react","import_react","StarterKit","import_extension_list","import_starter_kit","StarterKit","editor","import_react","import_tiptap_markdown","import_jsx_runtime"]}

package/dist/index.d.cts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface NotraEditorProps {
+    /** Markdown content (source of truth) */
+    value: string;
+    /** Called when content changes, receives updated Markdown */
+    onChange: (value: string) => void;
+    /** Placeholder text shown when editor is empty */
+    placeholder?: string;
+    /** Disable editing */
+    readOnly?: boolean;
+    /** Additional CSS class on the wrapper element */
+    className?: string;
+}
+declare function NotraEditor({ value, onChange, placeholder, readOnly, className }: NotraEditorProps): react_jsx_runtime.JSX.Element;
+
+interface NotraReaderProps {
+    /** Markdown content to render */
+    content: string;
+    /** Additional CSS class on the wrapper element */
+    className?: string;
+}
+declare function NotraReader({ content, className }: NotraReaderProps): react_jsx_runtime.JSX.Element;
+
+export { NotraEditor, type NotraEditorProps, NotraReader, type NotraReaderProps };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface NotraEditorProps {
+    /** Markdown content (source of truth) */
+    value: string;
+    /** Called when content changes, receives updated Markdown */
+    onChange: (value: string) => void;
+    /** Placeholder text shown when editor is empty */
+    placeholder?: string;
+    /** Disable editing */
+    readOnly?: boolean;
+    /** Additional CSS class on the wrapper element */
+    className?: string;
+}
+declare function NotraEditor({ value, onChange, placeholder, readOnly, className }: NotraEditorProps): react_jsx_runtime.JSX.Element;
+
+interface NotraReaderProps {
+    /** Markdown content to render */
+    content: string;
+    /** Additional CSS class on the wrapper element */
+    className?: string;
+}
+declare function NotraReader({ content, className }: NotraReaderProps): react_jsx_runtime.JSX.Element;
+
+export { NotraEditor, type NotraEditorProps, NotraReader, type NotraReaderProps };

package/dist/index.mjs

@@ -0,0 +1,145 @@
+// src/notra-editor.tsx
+import { EditorContent } from "@tiptap/react";
+
+// src/hooks/use-markdown-editor.ts
+import { useEditor } from "@tiptap/react";
+import { useEffect, useRef } from "react";
+
+// src/extensions/shared.ts
+import { ListKit } from "@tiptap/extension-list";
+import StarterKit from "@tiptap/starter-kit";
+var starterKitBaseConfig = {
+  heading: { levels: [1, 2, 3, 4, 5, 6] },
+  link: {
+    openOnClick: false,
+    autolink: true
+  },
+  // Disable StarterKit's built-in list handling; use @tiptap/extension-list instead
+  bulletList: false,
+  orderedList: false,
+  listItem: false,
+  listKeymap: false
+};
+var sharedExtensions = [
+  StarterKit.configure({
+    ...starterKitBaseConfig,
+    dropcursor: false,
+    gapcursor: false,
+    undoRedo: false,
+    trailingNode: false
+  }),
+  ListKit
+];
+
+// src/extensions/editor.ts
+import { ListKit as ListKit2 } from "@tiptap/extension-list";
+import StarterKit2 from "@tiptap/starter-kit";
+import { Markdown } from "tiptap-markdown";
+var editorExtensions = [
+  StarterKit2.configure(starterKitBaseConfig),
+  ListKit2,
+  Markdown.configure({
+    html: false,
+    transformPastedText: true,
+    transformCopiedText: true
+  })
+];
+
+// src/hooks/use-markdown-editor.ts
+function getMarkdown(storage) {
+  return storage.markdown.getMarkdown();
+}
+function useMarkdownEditor({
+  value,
+  onChange,
+  editable = true
+}) {
+  const externalValue = useRef(value);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const editor = useEditor({
+    extensions: editorExtensions,
+    editable,
+    content: value,
+    onUpdate({ editor: editor2 }) {
+      const md = getMarkdown(
+        editor2.storage
+      );
+      externalValue.current = md;
+      onChangeRef.current(md);
+    }
+  });
+  useEffect(() => {
+    if (!editor) return;
+    if (value === externalValue.current) return;
+    externalValue.current = value;
+    editor.commands.setContent(value);
+  }, [value, editor]);
+  useEffect(() => {
+    if (!editor) return;
+    editor.setEditable(editable);
+  }, [editable, editor]);
+  return { editor };
+}
+
+// src/notra-editor.tsx
+import { jsx } from "react/jsx-runtime";
+function NotraEditor({
+  value,
+  onChange,
+  placeholder,
+  readOnly = false,
+  className
+}) {
+  const { editor } = useMarkdownEditor({
+    value,
+    onChange,
+    placeholder,
+    editable: !readOnly
+  });
+  const classNames = ["notra", "notra-editor", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classNames, children: /* @__PURE__ */ jsx(EditorContent, { editor }) });
+}
+
+// src/notra-reader.tsx
+import { renderToReactElement } from "@tiptap/static-renderer/pm/react";
+
+// src/utils/markdown-to-json.ts
+import { Editor } from "@tiptap/core";
+import { Markdown as Markdown2 } from "tiptap-markdown";
+var parserExtensions = [
+  ...sharedExtensions,
+  Markdown2.configure({ html: false })
+];
+var parserEditor = null;
+function getParserEditor() {
+  if (!parserEditor) {
+    parserEditor = new Editor({
+      extensions: parserExtensions,
+      content: ""
+    });
+  }
+  return parserEditor;
+}
+function markdownToJSON(markdown) {
+  const editor = getParserEditor();
+  editor.commands.setContent(markdown);
+  return editor.getJSON();
+}
+
+// src/notra-reader.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function NotraReader({ content, className }) {
+  const json = markdownToJSON(content);
+  const rendered = renderToReactElement({
+    extensions: sharedExtensions,
+    content: json
+  });
+  const classNames = ["notra", "notra-reader", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx2("div", { className: classNames, children: rendered });
+}
+export {
+  NotraEditor,
+  NotraReader
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/notra-editor.tsx","../src/hooks/use-markdown-editor.ts","../src/extensions/shared.ts","../src/extensions/editor.ts","../src/notra-reader.tsx","../src/utils/markdown-to-json.ts"],"sourcesContent":["import { EditorContent } from '@tiptap/react';\n\nimport { useMarkdownEditor } from './hooks/use-markdown-editor';\n\nexport interface NotraEditorProps {\n\t/** Markdown content (source of truth) */\n\tvalue: string;\n\t/** Called when content changes, receives updated Markdown */\n\tonChange: (value: string) => void;\n\t/** Placeholder text shown when editor is empty */\n\tplaceholder?: string;\n\t/** Disable editing */\n\treadOnly?: boolean;\n\t/** Additional CSS class on the wrapper element */\n\tclassName?: string;\n}\n\nexport function NotraEditor({\n\tvalue,\n\tonChange,\n\tplaceholder,\n\treadOnly = false,\n\tclassName\n}: NotraEditorProps) {\n\tconst { editor } = useMarkdownEditor({\n\t\tvalue,\n\t\tonChange,\n\t\tplaceholder,\n\t\teditable: !readOnly\n\t});\n\n\tconst classNames = ['notra', 'notra-editor', className]\n\t\t.filter(Boolean)\n\t\t.join(' ');\n\n\treturn (\n\t\t<div className={classNames}>\n\t\t\t<EditorContent editor={editor} />\n\t\t</div>\n\t);\n}\n","import { useEditor } from '@tiptap/react';\nimport { useEffect, useRef } from 'react';\n\nimport { editorExtensions } from '../extensions';\n\nimport type { MarkdownStorage } from 'tiptap-markdown';\n\nexport interface UseMarkdownEditorOptions {\n\tvalue: string;\n\tonChange: (value: string) => void;\n\tplaceholder?: string;\n\teditable?: boolean;\n}\n\nfunction getMarkdown(storage: Record<string, unknown>): string {\n\treturn (storage.markdown as MarkdownStorage).getMarkdown();\n}\n\nexport function useMarkdownEditor({\n\tvalue,\n\tonChange,\n\teditable = true\n}: UseMarkdownEditorOptions) {\n\tconst externalValue = useRef(value);\n\tconst onChangeRef = useRef(onChange);\n\n\tonChangeRef.current = onChange;\n\n\tconst editor = useEditor({\n\t\textensions: editorExtensions,\n\t\teditable,\n\t\tcontent: value,\n\t\tonUpdate({ editor }) {\n\t\t\tconst md = getMarkdown(\n\t\t\t\teditor.storage as unknown as Record<string, unknown>\n\t\t\t);\n\n\t\t\texternalValue.current = md;\n\t\t\tonChangeRef.current(md);\n\t\t}\n\t});\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\tif (value === externalValue.current) return;\n\n\t\texternalValue.current = value;\n\t\teditor.commands.setContent(value);\n\t}, [value, editor]);\n\n\tuseEffect(() => {\n\t\tif (!editor) return;\n\n\t\teditor.setEditable(editable);\n\t}, [editable, editor]);\n\n\treturn { editor };\n}\n","import { ListKit } from '@tiptap/extension-list';\nimport StarterKit, { type StarterKitOptions } from '@tiptap/starter-kit';\n\n// Shared StarterKit config: content nodes/marks, no lists (use ListKit instead)\nexport const starterKitBaseConfig: Partial<StarterKitOptions> = {\n\theading: { levels: [1, 2, 3, 4, 5, 6] },\n\tlink: {\n\t\topenOnClick: false,\n\t\tautolink: true\n\t},\n\t// Disable StarterKit's built-in list handling; use @tiptap/extension-list instead\n\tbulletList: false,\n\torderedList: false,\n\tlistItem: false,\n\tlistKeymap: false\n};\n\n// Content model extensions — shared by editor and reader\n// No interactive features (dropcursor, gapcursor, undoRedo, trailingNode)\nexport const sharedExtensions = [\n\tStarterKit.configure({\n\t\t...starterKitBaseConfig,\n\t\tdropcursor: false,\n\t\tgapcursor: false,\n\t\tundoRedo: false,\n\t\ttrailingNode: false\n\t}),\n\tListKit\n];\n","import { ListKit } from '@tiptap/extension-list';\nimport StarterKit from '@tiptap/starter-kit';\nimport { Markdown } from 'tiptap-markdown';\n\nimport { starterKitBaseConfig } from './shared';\n\n// Editor extensions = shared content model + interactive features + Markdown\nexport const editorExtensions = [\n\tStarterKit.configure(starterKitBaseConfig),\n\tListKit,\n\tMarkdown.configure({\n\t\thtml: false,\n\t\ttransformPastedText: true,\n\t\ttransformCopiedText: true\n\t})\n];\n","import { renderToReactElement } from '@tiptap/static-renderer/pm/react';\n\nimport { sharedExtensions } from './extensions';\nimport { markdownToJSON } from './utils/markdown-to-json';\n\nexport interface NotraReaderProps {\n\t/** Markdown content to render */\n\tcontent: string;\n\t/** Additional CSS class on the wrapper element */\n\tclassName?: string;\n}\n\nexport function NotraReader({ content, className }: NotraReaderProps) {\n\tconst json = markdownToJSON(content);\n\n\tconst rendered = renderToReactElement({\n\t\textensions: sharedExtensions,\n\t\tcontent: json\n\t});\n\n\tconst classNames = ['notra', 'notra-reader', className]\n\t\t.filter(Boolean)\n\t\t.join(' ');\n\n\treturn <div className={classNames}>{rendered}</div>;\n}\n","import { Editor } from '@tiptap/core';\nimport { Markdown } from 'tiptap-markdown';\n\nimport { sharedExtensions } from '../extensions';\n\n// Parser needs shared content model + Markdown for markdown→JSON conversion\n// No clipboard features needed (transformPastedText/transformCopiedText are editor-only)\nconst parserExtensions = [\n\t...sharedExtensions,\n\tMarkdown.configure({ html: false })\n];\n\nlet parserEditor: Editor | null = null;\n\nfunction getParserEditor(): Editor {\n\tif (!parserEditor) {\n\t\tparserEditor = new Editor({\n\t\t\textensions: parserExtensions,\n\t\t\tcontent: ''\n\t\t});\n\t}\n\n\treturn parserEditor;\n}\n\n/**\n * Convert a Markdown string to Tiptap-compatible JSON (ProseMirror document).\n * Uses a singleton headless Tiptap editor for parsing.\n */\nexport function markdownToJSON(markdown: string): Record<string, unknown> {\n\tconst editor = getParserEditor();\n\n\teditor.commands.setContent(markdown);\n\n\treturn editor.getJSON() as Record<string, unknown>;\n}\n"],"mappings":"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","names":["ListKit","StarterKit","StarterKit","ListKit","editor","Markdown","Markdown","jsx"]}

package/dist/themes/default/editor.css

@@ -0,0 +1,76 @@
+/* =====================
+   Editor-specific Variables
+   ===================== */
+.notra-editor {
+	--notra-cursor-color: rgba(98, 41, 255, 1);
+	--notra-selection-color: rgba(157, 138, 255, 0.2);
+	--notra-placeholder-color: rgba(40, 44, 51, 0.42);
+}
+
+/* =====================
+   Editor Container
+   ===================== */
+.notra-editor .tiptap.ProseMirror {
+	white-space: pre-wrap;
+	outline: none;
+	caret-color: var(--notra-cursor-color);
+}
+
+/* =====================
+   Selection
+   ===================== */
+.notra-editor .tiptap.ProseMirror ::selection {
+	background-color: var(--notra-selection-color);
+}
+
+.notra-editor .tiptap.ProseMirror .selection {
+	display: inline;
+	background-color: var(--notra-selection-color);
+}
+
+.notra-editor .tiptap.ProseMirror .selection::selection {
+	background: transparent;
+}
+
+.notra-editor
+	.tiptap.ProseMirror
+	.ProseMirror-selectednode:not(img):not(pre):not(.react-renderer) {
+	border-radius: var(--notra-radius);
+	background-color: var(--notra-selection-color);
+}
+
+/* =====================
+   Placeholder
+   ===================== */
+.notra-editor .tiptap.ProseMirror > * {
+	position: relative;
+}
+
+.notra-editor
+	.tiptap.ProseMirror
+	.is-empty[data-placeholder]:has(
+		> .ProseMirror-trailingBreak:only-child
+	)::before {
+	content: attr(data-placeholder);
+	pointer-events: none;
+	height: 0;
+	position: absolute;
+	width: 100%;
+	text-align: inherit;
+	left: 0;
+	right: 0;
+	color: var(--notra-placeholder-color);
+}
+
+/* =====================
+   Drop Cursor
+   ===================== */
+.notra-editor .prosemirror-dropcursor-block,
+.notra-editor .prosemirror-dropcursor-inline {
+	background: var(--notra-cursor-color) !important;
+	border-radius: 0.25rem;
+	margin-left: -1px;
+	margin-right: -1px;
+	width: 100%;
+	height: 0.188rem;
+}

package/dist/themes/default/reader.css

@@ -0,0 +1,14 @@
+/* =====================
+   Reader-specific Styles
+   ===================== */
+.notra-reader {
+	font-family: var(--notra-font-body);
+	font-size: var(--notra-font-size);
+	line-height: var(--notra-line-height);
+	color: var(--notra-color-text);
+}
+
+/* Ensure native selection in reader mode */
+.notra-reader *::selection {
+	background-color: highlight;
+}

package/dist/themes/default/shared.css

@@ -0,0 +1,431 @@
+/* =====================
+   CSS Custom Properties
+   ===================== */
+.notra {
+	--notra-font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
+	--notra-font-mono: 'JetBrains Mono NL', ui-monospace, 'SF Mono', monospace;
+	--notra-font-size: 1rem;
+	--notra-line-height: 1.6;
+
+	/* Light mode colors */
+	--notra-color-text: rgba(29, 30, 32, 0.98);
+	--notra-color-bg: #ffffff;
+	--notra-color-border: rgba(37, 39, 45, 0.1);
+	--notra-color-link: rgba(98, 41, 255, 1);
+
+	/* Code */
+	--notra-code-bg: rgba(15, 22, 36, 0.05);
+	--notra-code-text: rgba(35, 37, 42, 0.87);
+	--notra-code-border: rgba(37, 39, 45, 0.1);
+	--notra-codeblock-bg: rgba(56, 56, 56, 0.04);
+	--notra-codeblock-text: rgba(30, 32, 36, 0.95);
+	--notra-codeblock-border: rgba(37, 39, 45, 0.1);
+
+	/* Blockquote */
+	--notra-blockquote-bar: rgba(29, 30, 32, 0.98);
+
+	/* Horizontal rule */
+	--notra-hr-color: rgba(37, 39, 45, 0.1);
+
+	/* Task list */
+	--notra-checklist-bg: rgba(15, 22, 36, 0.05);
+	--notra-checklist-bg-active: rgba(29, 30, 32, 0.98);
+	--notra-checklist-border: rgba(37, 39, 45, 0.1);
+	--notra-checklist-border-active: rgba(29, 30, 32, 0.98);
+	--notra-checklist-check-color: #ffffff;
+	--notra-checklist-text-active: rgba(52, 55, 60, 0.64);
+
+	--notra-radius: 6px;
+}
+
+/* =====================
+   Base Typography
+   ===================== */
+.notra .tiptap,
+.notra-reader {
+	font-family: var(--notra-font-body);
+	font-size: var(--notra-font-size);
+	line-height: var(--notra-line-height);
+	color: var(--notra-color-text);
+}
+
+/* =====================
+   Paragraphs
+   ===================== */
+.notra .tiptap p:not(:first-child):not(td p):not(th p),
+.notra-reader p:not(:first-child) {
+	font-size: 1rem;
+	line-height: 1.6;
+	font-weight: normal;
+	margin-top: 20px;
+}
+
+/* =====================
+   Headings
+   ===================== */
+.notra .tiptap h1,
+.notra .tiptap h2,
+.notra .tiptap h3,
+.notra .tiptap h4,
+.notra .tiptap h5,
+.notra .tiptap h6,
+.notra-reader h1,
+.notra-reader h2,
+.notra-reader h3,
+.notra-reader h4,
+.notra-reader h5,
+.notra-reader h6 {
+	position: relative;
+	color: inherit;
+	font-style: inherit;
+}
+
+.notra .tiptap > h1:first-child,
+.notra .tiptap > h2:first-child,
+.notra .tiptap > h3:first-child,
+.notra .tiptap > h4:first-child,
+.notra-reader > h1:first-child,
+.notra-reader > h2:first-child,
+.notra-reader > h3:first-child,
+.notra-reader > h4:first-child {
+	margin-top: 0;
+}
+
+.notra .tiptap h1,
+.notra-reader h1 {
+	font-size: 1.5em;
+	font-weight: 700;
+	margin-top: 3em;
+}
+
+.notra .tiptap h2,
+.notra-reader h2 {
+	font-size: 1.25em;
+	font-weight: 700;
+	margin-top: 2.5em;
+}
+
+.notra .tiptap h3,
+.notra-reader h3 {
+	font-size: 1.125em;
+	font-weight: 600;
+	margin-top: 2em;
+}
+
+.notra .tiptap h4,
+.notra-reader h4 {
+	font-size: 1em;
+	font-weight: 600;
+	margin-top: 2em;
+}
+
+.notra .tiptap h5,
+.notra-reader h5 {
+	font-size: 0.875em;
+	font-weight: 600;
+	margin-top: 1.5em;
+}
+
+.notra .tiptap h6,
+.notra-reader h6 {
+	font-size: 0.75em;
+	font-weight: 600;
+	margin-top: 1.5em;
+}
+
+/* =====================
+   Lists — Common
+   ===================== */
+.notra .tiptap ol,
+.notra .tiptap ul,
+.notra-reader ol,
+.notra-reader ul {
+	margin-top: 1.5em;
+	margin-bottom: 1.5em;
+	padding-left: 1.5em;
+}
+
+.notra .tiptap ol:first-child,
+.notra .tiptap ul:first-child,
+.notra-reader ol:first-child,
+.notra-reader ul:first-child {
+	margin-top: 0;
+}
+
+.notra .tiptap ol:last-child,
+.notra .tiptap ul:last-child,
+.notra-reader ol:last-child,
+.notra-reader ul:last-child {
+	margin-bottom: 0;
+}
+
+.notra .tiptap ol ol,
+.notra .tiptap ol ul,
+.notra .tiptap ul ol,
+.notra .tiptap ul ul,
+.notra-reader ol ol,
+.notra-reader ol ul,
+.notra-reader ul ol,
+.notra-reader ul ul {
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.notra .tiptap li p,
+.notra-reader li p {
+	margin-top: 0;
+	line-height: 1.6;
+}
+
+/* =====================
+   Ordered Lists — Nested styles
+   ===================== */
+.notra .tiptap ol,
+.notra-reader ol {
+	list-style: decimal;
+}
+
+.notra .tiptap ol ol,
+.notra-reader ol ol {
+	list-style: lower-alpha;
+}
+
+.notra .tiptap ol ol ol,
+.notra-reader ol ol ol {
+	list-style: lower-roman;
+}
+
+/* =====================
+   Unordered Lists — Nested styles
+   ===================== */
+.notra .tiptap ul:not([data-type='taskList']),
+.notra-reader ul:not([data-type='taskList']) {
+	list-style: disc;
+}
+
+.notra .tiptap ul:not([data-type='taskList']) ul,
+.notra-reader ul:not([data-type='taskList']) ul {
+	list-style: circle;
+}
+
+.notra .tiptap ul:not([data-type='taskList']) ul ul,
+.notra-reader ul:not([data-type='taskList']) ul ul {
+	list-style: square;
+}
+
+/* =====================
+   Task Lists
+   ===================== */
+.notra .tiptap ul[data-type='taskList'],
+.notra-reader ul[data-type='taskList'] {
+	padding-left: 0.25em;
+	list-style: none;
+}
+
+.notra .tiptap ul[data-type='taskList'] li,
+.notra-reader ul[data-type='taskList'] li {
+	display: flex;
+	flex-direction: row;
+	align-items: flex-start;
+}
+
+.notra .tiptap ul[data-type='taskList'] li[data-checked='true'] > div > p,
+.notra-reader ul[data-type='taskList'] li[data-checked='true'] > div > p {
+	opacity: 0.5;
+	text-decoration: line-through;
+}
+
+.notra .tiptap ul[data-type='taskList'] li label,
+.notra-reader ul[data-type='taskList'] li label {
+	position: relative;
+	padding-top: 0.375rem;
+	padding-right: 0.5rem;
+}
+
+.notra .tiptap ul[data-type='taskList'] li label input[type='checkbox'],
+.notra-reader ul[data-type='taskList'] li label input[type='checkbox'] {
+	position: absolute;
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+
+.notra .tiptap ul[data-type='taskList'] li label span,
+.notra-reader ul[data-type='taskList'] li label span {
+	display: block;
+	width: 1em;
+	height: 1em;
+	border: 1px solid var(--notra-checklist-border);
+	border-radius: 0.25rem;
+	position: relative;
+	cursor: pointer;
+	background-color: var(--notra-checklist-bg);
+	transition:
+		background-color 80ms ease-out,
+		border-color 80ms ease-out;
+}
+
+.notra .tiptap ul[data-type='taskList'] li label span::before,
+.notra-reader ul[data-type='taskList'] li label span::before {
+	content: '';
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: 0.75em;
+	height: 0.75em;
+	background-color: var(--notra-checklist-check-color);
+	opacity: 0;
+	-webkit-mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.4142 4.58579C22.1953 5.36683 22.1953 6.63317 21.4142 7.41421L10.4142 18.4142C9.63317 19.1953 8.36684 19.1953 7.58579 18.4142L2.58579 13.4142C1.80474 12.6332 1.80474 11.3668 2.58579 10.5858C3.36683 9.80474 4.63317 9.80474 5.41421 10.5858L9 14.1716L18.5858 4.58579C19.3668 3.80474 20.6332 3.80474 21.4142 4.58579Z' fill='currentColor'/%3E%3C/svg%3E")
+		center / contain no-repeat;
+	mask: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='currentColor' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.4142 4.58579C22.1953 5.36683 22.1953 6.63317 21.4142 7.41421L10.4142 18.4142C9.63317 19.1953 8.36684 19.1953 7.58579 18.4142L2.58579 13.4142C1.80474 12.6332 1.80474 11.3668 2.58579 10.5858C3.36683 9.80474 4.63317 9.80474 5.41421 10.5858L9 14.1716L18.5858 4.58579C19.3668 3.80474 20.6332 3.80474 21.4142 4.58579Z' fill='currentColor'/%3E%3C/svg%3E")
+		center / contain no-repeat;
+}
+
+.notra
+	.tiptap
+	ul[data-type='taskList']
+	li
+	label
+	input[type='checkbox']:checked
+	+ span,
+.notra-reader
+	ul[data-type='taskList']
+	li
+	label
+	input[type='checkbox']:checked
+	+ span {
+	background: var(--notra-checklist-bg-active);
+	border-color: var(--notra-checklist-border-active);
+}
+
+.notra
+	.tiptap
+	ul[data-type='taskList']
+	li
+	label
+	input[type='checkbox']:checked
+	+ span::before,
+.notra-reader
+	ul[data-type='taskList']
+	li
+	label
+	input[type='checkbox']:checked
+	+ span::before {
+	opacity: 1;
+}
+
+.notra .tiptap ul[data-type='taskList'] li div,
+.notra-reader ul[data-type='taskList'] li div {
+	flex: 1 1 0%;
+	min-width: 0;
+}
+
+/* =====================
+   Code — Inline
+   ===================== */
+.notra .tiptap code,
+.notra-reader code {
+	background-color: var(--notra-code-bg);
+	color: var(--notra-code-text);
+	border: 1px solid var(--notra-code-border);
+	font-family: var(--notra-font-mono);
+	font-size: 0.875em;
+	line-height: 1.4;
+	border-radius: var(--notra-radius);
+	padding: 0.1em 0.2em;
+}
+
+/* =====================
+   Code — Block
+   ===================== */
+.notra .tiptap pre,
+.notra-reader pre {
+	background-color: var(--notra-codeblock-bg);
+	color: var(--notra-codeblock-text);
+	border: 1px solid var(--notra-codeblock-border);
+	margin-top: 1.5em;
+	margin-bottom: 1.5em;
+	padding: 1em;
+	font-size: 1rem;
+	border-radius: var(--notra-radius);
+}
+
+.notra .tiptap pre code,
+.notra-reader pre code {
+	background-color: transparent;
+	border: none;
+	border-radius: 0;
+	color: inherit;
+	padding: 0;
+}
+
+/* =====================
+   Blockquote
+   ===================== */
+.notra .tiptap blockquote,
+.notra-reader blockquote {
+	position: relative;
+	padding-left: 1em;
+	padding-top: 0.375em;
+	padding-bottom: 0.375em;
+	margin: 1.5rem 0;
+}
+
+.notra .tiptap blockquote p,
+.notra-reader blockquote p {
+	margin-top: 0;
+}
+
+.notra .tiptap blockquote::before,
+.notra-reader blockquote::before {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	top: 0;
+	height: 100%;
+	width: 0.25em;
+	background-color: var(--notra-blockquote-bar);
+	content: '';
+	border-radius: 0;
+}
+
+/* =====================
+   Horizontal Rule
+   ===================== */
+.notra .tiptap hr,
+.notra-reader hr {
+	border: none;
+	height: 1px;
+	background-color: var(--notra-hr-color);
+}
+
+.notra .tiptap [data-type='horizontalRule'],
+.notra-reader [data-type='horizontalRule'] {
+	margin-top: 2.25em;
+	margin-bottom: 2.25em;
+	padding-top: 0.75rem;
+	padding-bottom: 0.75rem;
+}
+
+/* =====================
+   Links
+   ===================== */
+.notra .tiptap a,
+.notra-reader a {
+	color: var(--notra-color-link);
+	text-decoration: underline;
+}
+
+/* =====================
+   Inline Text Decoration
+   ===================== */
+.notra .tiptap a span,
+.notra-reader a span {
+	text-decoration: underline;
+}
+
+.notra .tiptap s span,
+.notra-reader s span {
+	text-decoration: line-through;
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "notra-editor",
+  "type": "module",
+  "version": "0.1.0",
+  "description": "A Markdown-first rich text editor for React",
+  "license": "MIT",
+  "keywords": [
+    "editor",
+    "markdown",
+    "rich-text",
+    "tiptap",
+    "react",
+    "notion"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./themes/default/shared.css": "./dist/themes/default/shared.css",
+    "./themes/default/editor.css": "./dist/themes/default/editor.css",
+    "./themes/default/reader.css": "./dist/themes/default/reader.css"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@tiptap/core": "^3.22.4",
+    "@tiptap/extension-link": "^3.22.4",
+    "@tiptap/extension-list": "^3.22.4",
+    "@tiptap/pm": "^3.22.4",
+    "@tiptap/react": "^3.22.4",
+    "@tiptap/starter-kit": "^3.22.4",
+    "@tiptap/static-renderer": "^3.22.4",
+    "tiptap-markdown": "^0.8.10"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "19.2.2",
+    "jsdom": "^26.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.0",
+    "vitest": "^4.0.18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
+    "pub:beta": "pnpm build && pnpm publish --tag beta --access public",
+    "pub:release": "pnpm build && pnpm publish --access public"
+  }
+}