neuphlo-editor 0.2.0

package/README.md

@@ -0,0 +1,126 @@
+# neuphlo-editor
+
+A lightweight Tiptap preset with a React wrapper.
+
+## Install
+
+```bash
+npm i neuphlo-editor
+```
+
+Requires `react` and `react-dom` 18+ in your app.
+
+## Usage (React)
+
+```tsx
+import { Editor } from "neuphlo-editor/react"
+
+export default function Page() {
+  return <Editor content="<p>Hello</p>" />
+}
+```
+
+The React Editor includes the Neuphlo preset by default. Add more TipTap extensions when needed:
+
+```tsx
+import Placeholder from "@tiptap/extension-placeholder"
+
+<Editor
+  content="<p>Hello</p>"
+  extensions={[Placeholder.configure({ placeholder: "Write something…" })]}
+/>
+```
+
+### Styling
+
+- Default behavior:
+
+  - The component adds the `nph-editor` class by default.
+  - Import our minimal stylesheet in your app to activate defaults: `import 'neuphlo-editor/styles.css'` (or `@import 'neuphlo-editor/styles.css';`).
+    - Next.js App Router: `app/layout.tsx` or `app/globals.css`
+    - Vite/CRA: `src/main.tsx`/`src/index.tsx`
+  - The base CSS does not add a border or background; add your own if desired.
+
+- Opt out per instance:
+
+  - `<Editor styled={false} />`
+
+- Bring your own styles (Tailwind or CSS):
+  - Use `className` to style the content container; use `editorContainerProps` for other DOM props (e.g., `id`, `role`). No styles are injected by the package.
+  - You can combine your own classes with the optional stylesheet if you want.
+
+Examples:
+
+```tsx
+// Default stylesheet (minimal — no border/background by default)
+import 'neuphlo-editor/styles.css'
+
+<Editor />
+
+// Tailwind utilities
+<Editor className="min-h-[200px] border rounded-md p-3 outline-none" />
+
+// Plain CSS
+<Editor className="my-editor" />
+
+/* then in your CSS */
+.my-editor { min-height: 200px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; outline: none; }
+.my-editor:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,0.15); }
+```
+
+Advanced: pass TipTap options directly (everything maps to TipTap’s `EditorProvider`). Use `className` to style the content container, and `editorContainerProps` for additional DOM attributes:
+
+```tsx
+<Editor
+  autofocus
+  editable={false}
+  editorProps={{ attributes: { spellcheck: 'true' } }}
+  editorContainerProps={{ id: 'editor', role: 'textbox' }}
+/>
+
+// Alternatively, add the class manually via props
+<Editor className="nph-editor" />
+```
+
+### Editable
+
+Control whether the editor is editable (matches TipTap’s `editable` option). When not editable, helpful attributes are added for styling.
+
+```tsx
+<Editor editable={false} />
+
+
+// With default stylesheet + a visual cue
+import 'neuphlo-editor/styles.css'
+
+<Editor editable={false} className="opacity-60" />
+
+// You can target the state in CSS if you prefer
+.nph-editor[data-disabled="true"] {
+/_ e.g., make it look disabled _/
+opacity: 0.6;
+}
+```
+
+Notes:
+
+- `editable` is forwarded to TipTap.
+- When `editable={false}`, the content element receives `aria-disabled="true"` and `data-disabled="true"`.
+
+## Usage (Core/Headless)
+
+Using TipTap core directly? Compose your editor with the preset, then add your own extensions on top:
+
+```ts
+import { Editor } from "@tiptap/core"
+import { NeuphloPreset } from "neuphlo-editor"
+import Placeholder from "@tiptap/extension-placeholder"
+
+const editor = new Editor({
+  content: "<p>Hello</p>",
+  extensions: [
+    ...NeuphloPreset,
+    Placeholder.configure({ placeholder: "Write something…" }),
+  ],
+})
+```

package/dist/chunk-XABVYDNO.js

@@ -0,0 +1,14 @@
+import StarterKit from '@tiptap/starter-kit';
+
+// src/preset.ts
+var Preset = [
+  StarterKit.configure({
+    bulletList: { keepMarks: true },
+    orderedList: { keepMarks: true },
+    heading: { levels: [1, 2, 3, 4] }
+  })
+];
+
+export { Preset };
+//# sourceMappingURL=chunk-XABVYDNO.js.map
+//# sourceMappingURL=chunk-XABVYDNO.js.map

package/dist/chunk-XABVYDNO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preset.ts"],"names":[],"mappings":";;;AAGO,IAAM,MAAA,GAAsB;AAAA,EACjC,WAAW,SAAA,CAAU;AAAA,IACnB,UAAA,EAAY,EAAE,SAAA,EAAW,IAAA,EAAK;AAAA,IAC9B,WAAA,EAAa,EAAE,SAAA,EAAW,IAAA,EAAK;AAAA,IAC/B,OAAA,EAAS,EAAE,MAAA,EAAQ,CAAC,GAAG,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAAE,GACjC;AACH","file":"chunk-XABVYDNO.js","sourcesContent":["import type { Extension } from \"@tiptap/core\"\nimport StarterKit from \"@tiptap/starter-kit\"\n\nexport const Preset: Extension[] = [\n  StarterKit.configure({\n    bulletList: { keepMarks: true },\n    orderedList: { keepMarks: true },\n    heading: { levels: [1, 2, 3, 4] },\n  }),\n]\n"]}

package/dist/index.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+var StarterKit = require('@tiptap/starter-kit');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
+
+// src/preset.ts
+var Preset = [
+  StarterKit__default.default.configure({
+    bulletList: { keepMarks: true },
+    orderedList: { keepMarks: true },
+    heading: { levels: [1, 2, 3, 4] }
+  })
+];
+
+exports.Preset = Preset;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/preset.ts"],"names":["StarterKit"],"mappings":";;;;;;;;;AAGO,IAAM,MAAA,GAAsB;AAAA,EACjCA,4BAAW,SAAA,CAAU;AAAA,IACnB,UAAA,EAAY,EAAE,SAAA,EAAW,IAAA,EAAK;AAAA,IAC9B,WAAA,EAAa,EAAE,SAAA,EAAW,IAAA,EAAK;AAAA,IAC/B,OAAA,EAAS,EAAE,MAAA,EAAQ,CAAC,GAAG,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAAE,GACjC;AACH","file":"index.cjs","sourcesContent":["import type { Extension } from \"@tiptap/core\"\nimport StarterKit from \"@tiptap/starter-kit\"\n\nexport const Preset: Extension[] = [\n  StarterKit.configure({\n    bulletList: { keepMarks: true },\n    orderedList: { keepMarks: true },\n    heading: { levels: [1, 2, 3, 4] },\n  }),\n]\n"]}

package/dist/index.d.cts

@@ -0,0 +1,5 @@
+import { Extension } from '@tiptap/core';
+
+declare const Preset: Extension[];
+
+export { Preset };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+import { Extension } from '@tiptap/core';
+
+declare const Preset: Extension[];
+
+export { Preset };

package/dist/index.js

@@ -0,0 +1,3 @@
+export { Preset } from './chunk-XABVYDNO.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/react/index.cjs

@@ -0,0 +1,64 @@
+'use strict';
+
+var react = require('@tiptap/react');
+var StarterKit = require('@tiptap/starter-kit');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
+
+// src/react/Editor.tsx
+var Preset = [
+  StarterKit__default.default.configure({
+    bulletList: { keepMarks: true },
+    orderedList: { keepMarks: true },
+    heading: { levels: [1, 2, 3, 4] }
+  })
+];
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+function Editor({
+  styled = true,
+  className,
+  editorContainerProps,
+  extensions = [],
+  content,
+  onUpdate,
+  editorProps,
+  editable = true,
+  children,
+  ...rest
+}) {
+  const mergedContainerProps = {
+    ...editorContainerProps,
+    className: cn(styled && "nph-editor", className)
+  };
+  const mergedEditorProps = {
+    ...editorProps,
+    attributes: {
+      ...editorProps?.attributes,
+      ...!editable ? { "aria-disabled": "true", "data-disabled": "true" } : {}
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.EditorProvider,
+    {
+      content,
+      extensions: [...Preset, ...extensions ?? []],
+      onUpdate,
+      editorProps: mergedEditorProps,
+      editable,
+      editorContainerProps: mergedContainerProps,
+      ...rest,
+      children
+    }
+  );
+}
+
+exports.Editor = Editor;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/react/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/preset.ts","../../src/react/utils/cn.ts","../../src/react/Editor.tsx"],"names":["StarterKit","twMerge","clsx","jsx","EditorProvider"],"mappings":";;;;;;;;;;;;;AAGO,IAAM,MAAA,GAAsB;AAAA,EACjCA,4BAAW,SAAA,CAAU;AAAA,IACnB,UAAA,EAAY,EAAE,SAAA,EAAW,IAAA,EAAK;AAAA,IAC9B,WAAA,EAAa,EAAE,SAAA,EAAW,IAAA,EAAK;AAAA,IAC/B,OAAA,EAAS,EAAE,MAAA,EAAQ,CAAC,GAAG,CAAA,EAAG,CAAA,EAAG,CAAC,CAAA;AAAE,GACjC;AACH,CAAA;ACNO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOC,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACWO,SAAS,MAAA,CAAO;AAAA,EACrB,MAAA,GAAS,IAAA;AAAA,EACT,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,aAAa,EAAC;AAAA,EACd,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA,GAAW,IAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,oBAAA,GAAuB;AAAA,IAC3B,GAAG,oBAAA;AAAA,IACH,SAAA,EAAW,EAAA,CAAG,MAAA,IAAU,YAAA,EAAc,SAAS;AAAA,GACjD;AAEA,EAAA,MAAM,iBAAA,GAAoB;AAAA,IACxB,GAAG,WAAA;AAAA,IACH,UAAA,EAAY;AAAA,MACV,GAAG,WAAA,EAAa,UAAA;AAAA,MAChB,GAAI,CAAC,QAAA,GACD,EAAE,iBAAiB,MAAA,EAAQ,eAAA,EAAiB,MAAA,EAAO,GACnD;AAAC;AACP,GACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,YAAY,CAAC,GAAG,QAAQ,GAAI,UAAA,IAAc,EAAG,CAAA;AAAA,MAC7C,QAAA;AAAA,MACA,WAAA,EAAa,iBAAA;AAAA,MACb,QAAA;AAAA,MACA,oBAAA,EAAsB,oBAAA;AAAA,MACrB,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"index.cjs","sourcesContent":["import type { Extension } from \"@tiptap/core\"\nimport StarterKit from \"@tiptap/starter-kit\"\n\nexport const Preset: Extension[] = [\n  StarterKit.configure({\n    bulletList: { keepMarks: true },\n    orderedList: { keepMarks: true },\n    heading: { levels: [1, 2, 3, 4] },\n  }),\n]\n","import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\n","import * as React from \"react\"\nimport { EditorProvider } from \"@tiptap/react\"\nimport type { EditorProviderProps } from \"@tiptap/react\"\nimport { Preset } from \"../preset\"\nimport { cn } from \"./utils/cn\"\n\nexport type EditorProps = Omit<\n  EditorProviderProps,\n  \"children\" | \"slotBefore\" | \"slotAfter\" | \"editorContainerProps\"\n> & {\n  styled?: boolean\n  className?: string\n  editorContainerProps?: Omit<React.HTMLAttributes<HTMLDivElement>, \"className\">\n  children?: React.ReactNode\n}\n\nexport function Editor({\n  styled = true,\n  className,\n  editorContainerProps,\n  extensions = [],\n  content,\n  onUpdate,\n  editorProps,\n  editable = true,\n  children,\n  ...rest\n}: EditorProps) {\n  const mergedContainerProps = {\n    ...editorContainerProps,\n    className: cn(styled && \"nph-editor\", className),\n  }\n\n  const mergedEditorProps = {\n    ...editorProps,\n    attributes: {\n      ...editorProps?.attributes,\n      ...(!editable\n        ? { \"aria-disabled\": \"true\", \"data-disabled\": \"true\" }\n        : {}),\n    } as Record<string, string>,\n  }\n\n  return (\n    <EditorProvider\n      content={content}\n      extensions={[...Preset, ...(extensions ?? [])]}\n      onUpdate={onUpdate}\n      editorProps={mergedEditorProps}\n      editable={editable}\n      editorContainerProps={mergedContainerProps}\n      {...rest}\n    >\n      {children}\n    </EditorProvider>\n  )\n}\n"]}

package/dist/react/index.d.cts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { EditorProviderProps } from '@tiptap/react';
+
+type EditorProps = Omit<EditorProviderProps, "children" | "slotBefore" | "slotAfter" | "editorContainerProps"> & {
+    styled?: boolean;
+    className?: string;
+    editorContainerProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "className">;
+    children?: React.ReactNode;
+};
+declare function Editor({ styled, className, editorContainerProps, extensions, content, onUpdate, editorProps, editable, children, ...rest }: EditorProps): react_jsx_runtime.JSX.Element;
+
+export { Editor, type EditorProps };

package/dist/react/index.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import { EditorProviderProps } from '@tiptap/react';
+
+type EditorProps = Omit<EditorProviderProps, "children" | "slotBefore" | "slotAfter" | "editorContainerProps"> & {
+    styled?: boolean;
+    className?: string;
+    editorContainerProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "className">;
+    children?: React.ReactNode;
+};
+declare function Editor({ styled, className, editorContainerProps, extensions, content, onUpdate, editorProps, editable, children, ...rest }: EditorProps): react_jsx_runtime.JSX.Element;
+
+export { Editor, type EditorProps };

package/dist/react/index.js

@@ -0,0 +1,50 @@
+import { Preset } from '../chunk-XABVYDNO.js';
+import { EditorProvider } from '@tiptap/react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Editor({
+  styled = true,
+  className,
+  editorContainerProps,
+  extensions = [],
+  content,
+  onUpdate,
+  editorProps,
+  editable = true,
+  children,
+  ...rest
+}) {
+  const mergedContainerProps = {
+    ...editorContainerProps,
+    className: cn(styled && "nph-editor", className)
+  };
+  const mergedEditorProps = {
+    ...editorProps,
+    attributes: {
+      ...editorProps?.attributes,
+      ...!editable ? { "aria-disabled": "true", "data-disabled": "true" } : {}
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    EditorProvider,
+    {
+      content,
+      extensions: [...Preset, ...extensions ?? []],
+      onUpdate,
+      editorProps: mergedEditorProps,
+      editable,
+      editorContainerProps: mergedContainerProps,
+      ...rest,
+      children
+    }
+  );
+}
+
+export { Editor };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/react/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/utils/cn.ts","../../src/react/Editor.tsx"],"names":[],"mappings":";;;;;;AAGO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACWO,SAAS,MAAA,CAAO;AAAA,EACrB,MAAA,GAAS,IAAA;AAAA,EACT,SAAA;AAAA,EACA,oBAAA;AAAA,EACA,aAAa,EAAC;AAAA,EACd,OAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA,GAAW,IAAA;AAAA,EACX,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,oBAAA,GAAuB;AAAA,IAC3B,GAAG,oBAAA;AAAA,IACH,SAAA,EAAW,EAAA,CAAG,MAAA,IAAU,YAAA,EAAc,SAAS;AAAA,GACjD;AAEA,EAAA,MAAM,iBAAA,GAAoB;AAAA,IACxB,GAAG,WAAA;AAAA,IACH,UAAA,EAAY;AAAA,MACV,GAAG,WAAA,EAAa,UAAA;AAAA,MAChB,GAAI,CAAC,QAAA,GACD,EAAE,iBAAiB,MAAA,EAAQ,eAAA,EAAiB,MAAA,EAAO,GACnD;AAAC;AACP,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,YAAY,CAAC,GAAG,QAAQ,GAAI,UAAA,IAAc,EAAG,CAAA;AAAA,MAC7C,QAAA;AAAA,MACA,WAAA,EAAa,iBAAA;AAAA,MACb,QAAA;AAAA,MACA,oBAAA,EAAsB,oBAAA;AAAA,MACrB,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\n","import * as React from \"react\"\nimport { EditorProvider } from \"@tiptap/react\"\nimport type { EditorProviderProps } from \"@tiptap/react\"\nimport { Preset } from \"../preset\"\nimport { cn } from \"./utils/cn\"\n\nexport type EditorProps = Omit<\n  EditorProviderProps,\n  \"children\" | \"slotBefore\" | \"slotAfter\" | \"editorContainerProps\"\n> & {\n  styled?: boolean\n  className?: string\n  editorContainerProps?: Omit<React.HTMLAttributes<HTMLDivElement>, \"className\">\n  children?: React.ReactNode\n}\n\nexport function Editor({\n  styled = true,\n  className,\n  editorContainerProps,\n  extensions = [],\n  content,\n  onUpdate,\n  editorProps,\n  editable = true,\n  children,\n  ...rest\n}: EditorProps) {\n  const mergedContainerProps = {\n    ...editorContainerProps,\n    className: cn(styled && \"nph-editor\", className),\n  }\n\n  const mergedEditorProps = {\n    ...editorProps,\n    attributes: {\n      ...editorProps?.attributes,\n      ...(!editable\n        ? { \"aria-disabled\": \"true\", \"data-disabled\": \"true\" }\n        : {}),\n    } as Record<string, string>,\n  }\n\n  return (\n    <EditorProvider\n      content={content}\n      extensions={[...Preset, ...(extensions ?? [])]}\n      onUpdate={onUpdate}\n      editorProps={mergedEditorProps}\n      editable={editable}\n      editorContainerProps={mergedContainerProps}\n      {...rest}\n    >\n      {children}\n    </EditorProvider>\n  )\n}\n"]}

package/dist/styles.css

@@ -0,0 +1,119 @@
+.nph-editor {
+  --nph-radius: 8px;
+  --nph-text: #111827;
+  --nph-text-muted: #6b7280;
+  --nph-accent: #2563eb;
+
+  min-height: 160px;
+  border-radius: var(--nph-radius);
+  color: var(--nph-text);
+  padding: 12px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .nph-editor {
+    --nph-text: #fafafa;
+    --nph-text-muted: #a3a3a3;
+    --nph-accent: #60a5fa;
+  }
+}
+
+/* Typography */
+.nph-editor p {
+  margin: 0.75em 0;
+}
+.nph-editor h1,
+.nph-editor h2,
+.nph-editor h3,
+.nph-editor h4 {
+  margin: 1.2em 0 0.5em;
+  line-height: 1.2;
+}
+.nph-editor h1 {
+  font-size: 1.875rem;
+  font-weight: 700;
+}
+.nph-editor h2 {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+.nph-editor h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+.nph-editor h4 {
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.nph-editor ul,
+.nph-editor ol {
+  padding-left: 1.25rem;
+  margin: 0.75em 0;
+}
+.nph-editor ul {
+  list-style: disc;
+}
+.nph-editor ol {
+  list-style: decimal;
+}
+.nph-editor li {
+  margin: 0.25em 0;
+}
+
+.nph-editor a {
+  color: var(--nph-accent);
+  text-decoration: underline;
+}
+.nph-editor strong {
+  font-weight: 600;
+}
+.nph-editor em {
+  font-style: italic;
+}
+
+.nph-editor blockquote {
+  margin: 1em 0;
+  padding: 0.75em 1em;
+  color: var(--nph-text-muted);
+}
+
+.nph-editor code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+  font-size: 0.95em;
+  padding: 0.15em 0.35em;
+  border-radius: 4px;
+}
+.nph-editor pre {
+  padding: 0.75em 1em;
+  border-radius: 6px;
+  overflow: auto;
+}
+.nph-editor pre code {
+  padding: 0;
+  background: transparent;
+}
+
+.nph-editor hr {
+  border: none;
+  margin: 1.25em 0;
+}
+
+.nph-editor table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 1em 0;
+}
+.nph-editor th,
+.nph-editor td {
+  padding: 0.5em 0.75em;
+  text-align: left;
+}
+.nph-editor th {
+}
+
+.nph-editor img {
+  max-width: 100%;
+  height: auto;
+}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "neuphlo-editor",
+  "version": "0.2.0",
+  "private": false,
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "require": "./dist/react/index.cjs"
+    },
+    "./styles.css": {
+      "default": "./dist/styles.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "dist/styles.css"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts src/react/index.ts --dts --format esm,cjs --clean && npm run build:css",
+    "build:css": "cp src/styles.css dist/styles.css",
+    "dev": "tsup --watch",
+    "publish:dry": "npm publish --dry-run",
+    "prepack": "npm run build",
+    "prepare": "npm run build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Neuphlo/neuphlo-editor.git"
+  },
+  "bugs": {
+    "url": "https://github.com/Neuphlo/neuphlo-editor/issues"
+  },
+  "homepage": "https://github.com/Neuphlo/neuphlo-editor#readme",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@tiptap/core": "^2.4.0",
+    "@tiptap/pm": "^2.4.0",
+    "@tiptap/react": "^2.4.0",
+    "@tiptap/starter-kit": "^2.4.0",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.1.0",
+    "typescript": "^5.6.2"
+  }
+}