@pie-lib/editable-html-tip-tap 0.1.0

package/dist/styles/editorContainerStyles.d.ts

@@ -0,0 +1,135 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/styles/editorContainerStyles.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+declare const styles: (theme: any) => {
+    root: {
+        position: string;
+        padding: string;
+        border: string;
+        borderRadius: string;
+        cursor: string;
+        '& [data-slate-editor="true"]': {
+            wordBreak: string;
+            overflow: string;
+            maxHeight: string;
+            padding: string;
+        };
+        '&:first-child': {
+            marginTop: number;
+        };
+        '& ul, & ol': {
+            padding: string;
+            margin: string;
+        };
+        '& ul li p, & ol li p': {
+            marginTop: string;
+            marginBottom: string;
+        };
+        '& h1, & h2, & h3, & h4, & h5, & h6': {
+            lineHeight: number;
+            marginTop: string;
+            textWrap: string;
+        };
+        '& h1, & h2': {
+            marginTop: string;
+            marginBottom: string;
+        };
+        '& h1': {
+            fontSize: string;
+        };
+        '& h2': {
+            fontSize: string;
+        };
+        '& h3': {
+            fontSize: string;
+        };
+        '& h4, & h5, & h6': {
+            fontSize: string;
+        };
+        '& code': {
+            backgroundColor: string;
+            borderRadius: string;
+            color: string;
+            fontSize: string;
+            padding: string;
+        };
+        '& pre': {
+            background: string;
+            borderRadius: string;
+            color: string;
+            fontFamily: string;
+            margin: string;
+            padding: string;
+            '& code': {
+                background: string;
+                color: string;
+                fontSize: string;
+                padding: number;
+            };
+        };
+        '& blockquote': {
+            background: string;
+            borderLeft: string;
+            margin: string;
+            padding: string;
+        };
+        '& hr': {
+            border: string;
+            borderTop: string;
+            margin: string;
+        };
+        '& table': {
+            tableLayout: string;
+            width: string;
+            borderCollapse: string;
+            color: any;
+            backgroundColor: any;
+        };
+        '& table:not([border="1"]) tr': {
+            borderTop: string;
+        };
+        '& td, th': {
+            padding: string;
+            textAlign: string;
+        };
+        '& table:not([border="1"]) td, th': {
+            border: string;
+        };
+    };
+    children: {
+        padding: string;
+    };
+    editorHolder: {
+        position: string;
+        padding: string;
+        overflowY: string;
+        color: any;
+        backgroundColor: any;
+    };
+    disabledScrollbar: {
+        '&::-webkit-scrollbar': {
+            display: string;
+        };
+        scrollbarWidth: string;
+        '-ms-overflow-style': string;
+    };
+    error: {
+        border: string;
+    };
+    noBorder: {
+        border: string;
+    };
+    noPadding: {
+        padding: number;
+    };
+    toolbarOnTop: {
+        marginTop: string;
+    };
+};
+export default styles;
+//# sourceMappingURL=editorContainerStyles.d.ts.map

package/dist/styles/editorContainerStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorContainerStyles.d.ts","sourceRoot":"","sources":["../../src/styles/editorContainerStyles.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAIH,QAAA,MAAM,MAAM,GAAI,UAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4InB,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/dist/theme.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/theme.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const primary = "#304ffe";
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,eAAO,MAAM,OAAO,YAAY,CAAC"}

package/dist/utils/helper.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/utils/helper.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const normalizeInitialMarkup: (markup: any) => string;
+//# sourceMappingURL=helper.d.ts.map

package/dist/utils/helper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../src/utils/helper.tsx"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAUH,eAAO,MAAM,sBAAsB,GAAI,WAAM,WAQ5C,CAAC"}

package/dist/utils/helper.js

@@ -0,0 +1,7 @@
+//#region src/utils/helper.tsx
+var e = (e) => String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;"), t = (t) => {
+	let n = String(t ?? "").trim();
+	return n ? /<[^>]+>/.test(n) ? n : `<div>${e(n)}</div>` : "<div></div>";
+};
+//#endregion
+export { t as normalizeInitialMarkup };

package/dist/utils/size.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/utils/size.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+export declare const valueToSize: (v: any) => string | number | undefined;
+//# sourceMappingURL=size.d.ts.map

package/dist/utils/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../../src/utils/size.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,eAAO,MAAM,WAAW,GAAI,MAAC,gCA+B5B,CAAC"}

package/dist/utils/size.js

@@ -0,0 +1,14 @@
+//#region src/utils/size.ts
+var e = (e) => {
+	if (!e) return;
+	let t = /^calc\((.*)\)$/;
+	if (typeof e == "string") {
+		if (e.endsWith("%")) return;
+		if (e.endsWith("px") || e.endsWith("vh") || e.endsWith("vw") || e.endsWith("ch") || e.endsWith("em") || e.match(t)) return e;
+		let n = parseInt(e, 10);
+		return Number.isNaN(n) ? n : `${n}px`;
+	}
+	if (typeof e == "number") return `${e}px`;
+};
+//#endregion
+export { e as valueToSize };

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@pie-lib/editable-html-tip-tap",
+  "version": "0.1.0",
+  "description": "",
+  "dependencies": {
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/modifiers": "9.0.0",
+    "@dnd-kit/utilities": "3.2.2",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/drag": "0.1.0",
+    "@pie-lib/math-input": "0.1.0",
+    "@pie-lib/math-rendering": "0.1.0",
+    "@pie-lib/math-toolbar": "0.1.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "@tiptap/core": "3.0.9",
+    "@tiptap/extension-character-count": "3.0.9",
+    "@tiptap/extension-color": "3.0.9",
+    "@tiptap/extension-image": "3.0.9",
+    "@tiptap/extension-list-item": "3.0.9",
+    "@tiptap/extension-placeholder": "3.20.0",
+    "@tiptap/extension-subscript": "3.0.9",
+    "@tiptap/extension-superscript": "3.0.9",
+    "@tiptap/extension-table": "3.0.9",
+    "@tiptap/extension-table-cell": "3.0.9",
+    "@tiptap/extension-table-header": "3.0.9",
+    "@tiptap/extension-table-row": "3.0.9",
+    "@tiptap/extension-text-align": "3.0.9",
+    "@tiptap/extension-text-style": "3.0.9",
+    "@tiptap/pm": "3.0.9",
+    "@tiptap/react": "3.0.9",
+    "@tiptap/starter-kit": "3.0.9",
+    "change-case": "^3.0.2",
+    "classnames": "^2.2.6",
+    "debug": "^4.1.1",
+    "immutable": "^4.0.0-rc.12",
+    "keycode": "^2.2.0",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.6.2",
+    "react-attr-converter": "^0.3.1",
+    "react-jss": "^8.6.1",
+    "react-portal": "^4.2.0",
+    "tippy.js": "latest",
+    "to-style": "^1.3.3",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.0",
+    "@tiptap/extensions": "^3.20.0",
+    "@tiptap/extension-list": "3.0.9",
+    "prosemirror-state": "^1.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bun x vite build && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "test": "bun x vitest run"
+  }
+}

package/src/components/CharacterPicker.tsx

@@ -0,0 +1,210 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/CharacterPicker.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import get from 'lodash-es/get.js';
+
+import { PureToolbar } from '@pie-lib/math-toolbar';
+
+import CustomPopper from './characters/custom-popper.js';
+import { spanishConfig, specialConfig } from './characters/characterUtils.js';
+
+const CharacterIcon = ({ letter }) => (
+  <div
+    style={{
+      fontSize: '24px',
+      lineHeight: '24px',
+    }}
+  >
+    {letter}
+  </div>
+);
+
+CharacterIcon.propTypes = {
+  letter: PropTypes.string,
+};
+
+export function CharacterPicker({ editor, opts, onClose }) {
+  if (!opts?.characters?.length) {
+    return null;
+  }
+
+  const containerRef = useRef(null);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const [popover, setPopover] = useState(null);
+
+  const configToUse = useMemo(() => {
+    if (!opts) return spanishConfig;
+
+    switch (true) {
+      case opts.language === 'spanish':
+        return spanishConfig;
+      case opts.language === 'special':
+        return specialConfig;
+      default:
+        return opts;
+    }
+  }, [opts]);
+
+  const layoutForCharacters = useMemo(
+    () =>
+      configToUse.characters.reduce(
+        (obj, arr) => {
+          if (arr.length >= obj.columns) {
+            obj.columns = arr.length;
+          }
+
+          return obj;
+        },
+        { rows: configToUse.characters.length, columns: 0 },
+      ),
+    [configToUse],
+  );
+
+  const closePopOver = () => setPopover(null);
+
+  useEffect(
+    () => () => {
+      closePopOver();
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (!editor) return;
+
+    // Calculate position relative to selection
+    const editorDOM = editor.options.element;
+    const editorRect = editorDOM.getBoundingClientRect();
+    const bodyRect = document.body.getBoundingClientRect();
+    const { from } = editor.state.selection;
+    const start = editor.view.coordsAtPos(from);
+
+    let top = editorRect.top + Math.abs(bodyRect.top) + editorRect.height + 60;
+
+    if (editorRect.y > containerRef.current.offsetHeight) {
+      top = top - (containerRef.current.offsetHeight + editorRect.height) - 80;
+    }
+
+    setPosition({
+      // top: start.top + Math.abs(bodyRect.top) - containerRef.current.offsetHeight - 10 + additionalTopOffset, // shift above
+      top: top,
+      left: start.left,
+    });
+
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target) && !editor.view.dom.contains(e.target)) {
+        onClose();
+      }
+    };
+
+    const timeoutId = setTimeout(() => {
+      document.addEventListener('click', handleClickOutside);
+    });
+
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [editor, onClose]);
+
+  const renderPopOver = (event, el) => setPopover({ anchorEl: event.currentTarget, el });
+
+  const handleChange = (val) => {
+    if (typeof val === 'string') {
+      editor.chain().focus().insertContent(val).run();
+    }
+  };
+
+  return (
+    <>
+      {ReactDOM.createPortal(
+        <div
+          ref={containerRef}
+          className="insert-character-dialog"
+          data-toolbar-for={editor.instanceId}
+          style={{
+            visibility: position.top === 0 && position.left === 0 ? 'hidden' : 'initial',
+            position: 'absolute',
+            top: `${position.top}px`,
+            left: `${position.left}px`,
+            maxWidth: '500px',
+            zIndex: 99,
+          }}
+        >
+          <div>
+            <PureToolbar
+              keyPadCharacterRef={opts.keyPadCharacterRef}
+              setKeypadInteraction={opts.setKeypadInteraction}
+              autoFocus
+              noDecimal
+              hideInput
+              noLatexHandling
+              hideDoneButtonBackground
+              layoutForKeyPad={layoutForCharacters}
+              additionalKeys={configToUse.characters.reduce((arr, n) => {
+                arr = [
+                  ...arr,
+                  ...n.map((k) => ({
+                    name: get(k, 'name') || k,
+                    write: get(k, 'write') || k,
+                    label: get(k, 'label') || k,
+                    category: 'character',
+                    extraClass: 'character',
+                    extraProps: {
+                      ...(k.extraProps || {}),
+                      style: {
+                        ...(k.extraProps || {}).style,
+                        border: '1px solid #000',
+                      },
+                    },
+                    ...(configToUse.hasPreview
+                      ? {
+                          actions: {
+                            onMouseEnter: (ev) => renderPopOver(ev, k),
+                            onMouseLeave: closePopOver,
+                          },
+                        }
+                      : {}),
+                  })),
+                ];
+
+                return arr;
+              }, [])}
+              keypadMode="language"
+              onChange={handleChange}
+              onDone={onClose}
+            />
+          </div>
+        </div>,
+        document.body,
+      )}
+      {popover &&
+        ReactDOM.createPortal(
+          <CustomPopper onClose={closePopOver} anchorEl={popover.anchorEl}>
+            <div>{popover.el.label}</div>
+            <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.description}</div>
+            <div style={{ fontSize: 20, lineHeight: '20px' }}>{popover.el.unicode}</div>
+          </CustomPopper>,
+          document.body,
+        )}
+    </>
+  );
+}
+
+CharacterPicker.propTypes = {
+  editor: PropTypes.object,
+  opts: PropTypes.object,
+  onClose: PropTypes.func.isRequired,
+};
+
+export { CharacterIcon };