@pretextbook/web-editor 0.0.13 → 0.0.14

package/README.md

@@ -1,128 +1,128 @@
-# PreTeXt Plus Editor
-
-An in-browser editor for PreTeXt documents with visual and code editing modes.
-
-## Installation
-
-```bash
-npm install @pretextbook/web-editor
-```
-
-## Usage
-
-### Basic Setup
-
-```tsx
-import React, { useState } from 'react';
-import { Editors } from '@pretextbook/web-editor';
-import '@pretextbook/web-editor/dist/web-editor.css';
-
-function App() {
-  const [content, setContent] = useState('');
-  const [title, setTitle] = useState('My Document');
-
-  return (
-    <Editors
-      content={content}
-      onContentChange={setContent}
-      title={title}
-      onTitleChange={setTitle}
-      onSaveButton={() => console.log('Save clicked')}
-      saveButtonLabel="Save"
-      onCancelButton={() => console.log('Cancel clicked')}
-      cancelButtonLabel="Cancel"
-    />
-  );
-}
-
-export default App;
-```
-
-### Styling
-
-**Important:** This package uses Tailwind CSS internally, but **all styles are pre-compiled and bundled** in the CSS file. You don't need to install or configure Tailwind CSS in your project.
-
-Simply import the CSS file:
-
-```tsx
-import '@pretextbook/web-editor/dist/web-editor.css';
-```
-
-Or in your CSS file:
-```css
-@import '@pretextbook/web-editor/dist/web-editor.css';
-```
-
-All button styles, layout, and MenuBar styling will work automatically without any additional setup.
-```css
-@import '@pretextbook/web-editor/dist/web-editor.css';
-```
-
-## Props
-
-The `Editors` component accepts the following props:
-
-```tsx
-interface editorProps {
-  content: string;                          // The current PreTeXt content
-  onContentChange: (value: string | undefined) => void;  // Called when content changes
-  title?: string;                           // Document title
-  onTitleChange?: (value: string) => void;  // Called when title changes
-  onSaveButton?: () => void;                // Save button callback
-  saveButtonLabel?: string;                 // Custom save button text
-  onCancelButton?: () => void;              // Cancel button callback
-  cancelButtonLabel?: string;               // Custom cancel button text
-}
-```
-
-## Features
-
-- **Visual Editor**: Intuitive WYSIWYG editor for PreTeXt documents using Tiptap
-- **Code Editor**: Monaco-powered code editor with syntax highlighting
-- **Full Preview**: Full-page preview of your document
-- **Synchronized Editing**: Changes in one editor instantly reflect in the other
-- **Split View**: View code and visual editor side-by-side
-- **Math Support**: KaTeX support for rendering mathematical expressions
-- **Keyboard Shortcuts**: Intuitive keyboard navigation and commands
-
-## Peer Dependencies
-
-This package requires:
-- `react` >= 16.8.0
-- `react-dom` >= 16.8.0
-
-These must be installed separately in your project.
-
-## Browser Support
-
-This package requires a modern browser with ES2020 support.
-
-## Development
-
-For development setup:
-
-```bash
-npm install
-npm run dev
-```
-
-To build the library:
-
-```bash
-npm run build
-```
-
-To build the demo application:
-
-```bash
-npm run build:demo
-```
-
-## Publishing
-
-See [PUBLISHING.md](./PUBLISHING.md) for instructions on publishing to npm.
-
-## License
-
-MIT
-
+# PreTeXt Plus Editor
+
+An in-browser editor for PreTeXt documents with visual and code editing modes.
+
+## Installation
+
+```bash
+npm install @pretextbook/web-editor
+```
+
+## Usage
+
+### Basic Setup
+
+```tsx
+import React, { useState } from 'react';
+import { Editors } from '@pretextbook/web-editor';
+import '@pretextbook/web-editor/dist/web-editor.css';
+
+function App() {
+  const [content, setContent] = useState('');
+  const [title, setTitle] = useState('My Document');
+
+  return (
+    <Editors
+      content={content}
+      onContentChange={setContent}
+      title={title}
+      onTitleChange={setTitle}
+      onSaveButton={() => console.log('Save clicked')}
+      saveButtonLabel="Save"
+      onCancelButton={() => console.log('Cancel clicked')}
+      cancelButtonLabel="Cancel"
+    />
+  );
+}
+
+export default App;
+```
+
+### Styling
+
+**Important:** This package uses Tailwind CSS internally, but **all styles are pre-compiled and bundled** in the CSS file. You don't need to install or configure Tailwind CSS in your project.
+
+Simply import the CSS file:
+
+```tsx
+import '@pretextbook/web-editor/dist/web-editor.css';
+```
+
+Or in your CSS file:
+```css
+@import '@pretextbook/web-editor/dist/web-editor.css';
+```
+
+All button styles, layout, and MenuBar styling will work automatically without any additional setup.
+```css
+@import '@pretextbook/web-editor/dist/web-editor.css';
+```
+
+## Props
+
+The `Editors` component accepts the following props:
+
+```tsx
+interface editorProps {
+  content: string;                          // The current PreTeXt content
+  onContentChange: (value: string | undefined) => void;  // Called when content changes
+  title?: string;                           // Document title
+  onTitleChange?: (value: string) => void;  // Called when title changes
+  onSaveButton?: () => void;                // Save button callback
+  saveButtonLabel?: string;                 // Custom save button text
+  onCancelButton?: () => void;              // Cancel button callback
+  cancelButtonLabel?: string;               // Custom cancel button text
+}
+```
+
+## Features
+
+- **Visual Editor**: Intuitive WYSIWYG editor for PreTeXt documents using Tiptap
+- **Code Editor**: Monaco-powered code editor with syntax highlighting
+- **Full Preview**: Full-page preview of your document
+- **Synchronized Editing**: Changes in one editor instantly reflect in the other
+- **Split View**: View code and visual editor side-by-side
+- **Math Support**: KaTeX support for rendering mathematical expressions
+- **Keyboard Shortcuts**: Intuitive keyboard navigation and commands
+
+## Peer Dependencies
+
+This package requires:
+- `react` >= 16.8.0
+- `react-dom` >= 16.8.0
+
+These must be installed separately in your project.
+
+## Browser Support
+
+This package requires a modern browser with ES2020 support.
+
+## Development
+
+For development setup:
+
+```bash
+npm install
+npm run dev
+```
+
+To build the library:
+
+```bash
+npm run build
+```
+
+To build the demo application:
+
+```bash
+npm run build:demo
+```
+
+## Publishing
+
+See [PUBLISHING.md](./PUBLISHING.md) for instructions on publishing to npm.
+
+## License
+
+MIT
+

package/dist/index.es.js

@@ -32336,7 +32336,6 @@ const Cw = Oe.create({
   content: "text*",
   group: "inline math",
   inline: !0,
-  atom: !1,
   parseHTML() {
     return [{ tag: "m" }];
   },
@@ -32346,15 +32345,20 @@ const Cw = Oe.create({
   addNodeView() {
     return ({ node: r, HTMLAttributes: e }) => {
       const t = document.createElement("span");
-      t.classList.add("node-view"), Object.entries(e).forEach(([a, l]) => {
+      t.classList.add("node-view", "math"), Object.entries(e).forEach(([a, l]) => {
         t.setAttribute(a, l);
       });
       const n = document.createElement("span"), i = document.createElement("span"), s = r.textContent.trim();
-      return n.innerHTML = gi.renderToString(s, { throwOnError: !1 }), n.contentEditable = "true", i.classList.add("edit-math"), i.classList.add("is-editable"), i.innerHTML = "<m>" + r.textContent + "</m>", new MutationObserver(() => {
-        console.log("mutation observer"), n.innerHTML = gi.renderToString(r.textContent, {
+      return n.classList.add("katex-rendered"), n.innerHTML = gi.renderToString(s, { throwOnError: !1 }), n.contentEditable = "false", n.style.pointerEvents = "none", i.classList.add("edit-math"), i.classList.add("is-editable"), i.innerHTML = "<m>" + r.textContent + "</m>", i.contentEditable = "true", i.draggable = !1, new MutationObserver(() => {
+        const a = i.textContent || "";
+        n.innerHTML = gi.renderToString(a, {
           throwOnError: !1
         });
-      }).observe(i, { characterData: !0, subtree: !0 }), t.append(n, i), {
+      }).observe(i, { characterData: !0, subtree: !0 }), i.addEventListener("focus", () => {
+        t.classList.add("has-focus");
+      }), i.addEventListener("blur", () => {
+        t.classList.remove("has-focus");
+      }), t.appendChild(i), t.appendChild(n), {
         dom: t,
         contentDOM: i
       };
@@ -32374,15 +32378,20 @@ const Cw = Oe.create({
   addNodeView() {
     return ({ node: r, HTMLAttributes: e }) => {
       const t = document.createElement("div");
-      t.classList.add("node-view"), t.classList.add("display"), Object.entries(e).forEach(([a, l]) => {
+      t.classList.add("node-view", "math"), t.classList.add("display"), Object.entries(e).forEach(([a, l]) => {
         t.setAttribute(a, l);
       });
       const n = document.createElement("span"), i = document.createElement("span"), s = r.textContent.trim();
-      return n.innerHTML = gi.renderToString(s, { throwOnError: !1 }), n.contentEditable = "false", i.classList.add("edit-math"), i.classList.add("is-editable"), i.innerHTML = "<md>" + r.textContent + "</md>", new MutationObserver(() => {
-        console.log("mutation observer"), n.innerHTML = gi.renderToString(r.textContent, {
+      return n.classList.add("katex-rendered"), n.innerHTML = gi.renderToString(s, { throwOnError: !1 }), n.contentEditable = "false", n.style.pointerEvents = "none", i.classList.add("edit-math"), i.classList.add("is-editable"), i.contentEditable = "true", i.innerHTML = "<md>" + r.textContent + "</md>", i.draggable = !1, new MutationObserver(() => {
+        const a = i.textContent || "";
+        n.innerHTML = gi.renderToString(a, {
           throwOnError: !1
         });
-      }).observe(i, { characterData: !0, subtree: !0 }), t.append(n, i), {
+      }).observe(i, { characterData: !0, subtree: !0 }), i.addEventListener("focus", () => {
+        t.classList.add("has-focus");
+      }), i.addEventListener("blur", () => {
+        t.classList.remove("has-focus");
+      }), t.appendChild(i), t.appendChild(n), {
         dom: t,
         contentDOM: i
       };
@@ -32402,15 +32411,20 @@ const Cw = Oe.create({
   addNodeView() {
     return ({ node: r, HTMLAttributes: e }) => {
       const t = document.createElement("div");
-      t.classList.add("node-view"), t.classList.add("display"), Object.entries(e).forEach(([a, l]) => {
+      t.classList.add("node-view", "math"), t.classList.add("display"), Object.entries(e).forEach(([a, l]) => {
         t.setAttribute(a, l);
       });
       const n = document.createElement("span"), i = document.createElement("span"), s = r.textContent.trim();
-      return n.innerHTML = gi.renderToString(s, { throwOnError: !1 }), n.contentEditable = "false", i.classList.add("edit-math"), i.classList.add("is-editable"), i.innerHTML = "<md>" + r.textContent + "</md>", new MutationObserver(() => {
-        console.log("mutation observer"), n.innerHTML = gi.renderToString(r.textContent, {
+      return n.classList.add("katex-rendered"), n.innerHTML = gi.renderToString(s, { throwOnError: !1 }), n.contentEditable = "false", n.style.pointerEvents = "none", i.classList.add("edit-math"), i.classList.add("is-editable"), i.innerHTML = "<md>" + r.textContent + "</md>", i.contentEditable = "true", i.draggable = !1, new MutationObserver(() => {
+        const a = i.textContent || "";
+        n.innerHTML = gi.renderToString(a, {
           throwOnError: !1
         });
-      }).observe(i, { characterData: !0, subtree: !0 }), t.append(n, i), {
+      }).observe(i, { characterData: !0, subtree: !0 }), i.addEventListener("focus", () => {
+        t.classList.add("has-focus");
+      }), i.addEventListener("blur", () => {
+        t.classList.remove("has-focus");
+      }), t.appendChild(i), t.appendChild(n), {
         dom: t,
         contentDOM: i
       };