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

package/src/components/TiptapContainer.tsx

@@ -0,0 +1,228 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/TiptapContainer.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, useState, useRef } from 'react';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+import { valueToSize } from '../utils/size.js';
+
+import StyledMenuBar from './MenuBar.js';
+
+const StyledRoot: any = styled('div', {
+  shouldForwardProp: (prop) => !['noBorder', 'error'].includes(prop),
+})(({ theme, noBorder, error }) => ({
+  position: 'relative',
+  padding: '0px',
+  border: noBorder ? 'none' : '1px solid #ccc',
+  borderRadius: '4px',
+  cursor: 'text',
+  '& [data-slate-editor="true"]': {
+    wordBreak: 'break-word',
+    overflow: 'visible',
+    maxHeight: '500px',
+    padding: '5px',
+  },
+  '&:first-child': {
+    marginTop: 0,
+  },
+  '& ul, & ol': {
+    padding: '0 1rem',
+    margin: '1.25rem 1rem 1.25rem 0.4rem',
+  },
+  '& ul li p, & ol li p': {
+    marginTop: '0.25em',
+    marginBottom: '0.25em',
+  },
+  '& h1, & h2, & h3, & h4, & h5, & h6': {
+    lineHeight: 1.1,
+    marginTop: '2.5rem',
+    textWrap: 'pretty',
+  },
+  '& h1, & h2': {
+    marginTop: '3.5rem',
+    marginBottom: '1.5rem',
+  },
+  '& h1': {
+    fontSize: '1.4rem',
+  },
+  '& h2': {
+    fontSize: '1.2rem',
+  },
+  '& h3': {
+    fontSize: '1.1rem',
+  },
+  '& h4, & h5, & h6': {
+    fontSize: '1rem',
+  },
+  '& code': {
+    backgroundColor: 'var(--purple-light)',
+    borderRadius: '0.4rem',
+    color: 'var(--black)',
+    fontSize: '0.85rem',
+    padding: '0.25em 0.3em',
+  },
+  '& pre': {
+    background: 'var(--black)',
+    borderRadius: '0.5rem',
+    color: 'var(--white)',
+    fontFamily: '\'JetBrainsMono\', monospace',
+    margin: '1.5rem 0',
+    padding: '0.75rem 1rem',
+    '& code': {
+      background: 'none',
+      color: 'inherit',
+      fontSize: '0.8rem',
+      padding: 0,
+    },
+  },
+  '& blockquote': {
+    background: '#f9f9f9',
+    borderLeft: '5px solid #ccc',
+    margin: '1.5em 10px',
+    padding: '.5em 10px',
+  },
+  '& hr': {
+    border: 'none',
+    borderTop: '1px solid var(--gray-2)',
+    margin: '2rem 0',
+  },
+  '& p': {
+    margin: '0',
+  },
+  '& table': {
+    tableLayout: 'fixed',
+    width: '100%',
+    borderCollapse: 'collapse',
+    color: color.text(),
+    backgroundColor: color.background(),
+  },
+  '& table:not([border="1"]) tr': {
+    borderTop: '1px solid #dfe2e5',
+  },
+  '& td, th': {
+    padding: '.6em 1em',
+    textAlign: 'center',
+  },
+  '& table:not([border="1"]) td, th': {
+    border: '1px solid #dfe2e5',
+  },
+  ...(error && {
+    border: `2px solid ${theme.palette.error.main} !important`,
+  }),
+}));
+
+const StyledEditorHolder: any = styled('div', {
+  shouldForwardProp: (prop) => !['disableScrollbar', 'highlightShape'].includes(prop),
+})(({ theme, disableScrollbar, highlightShape }) => ({
+  position: 'relative',
+  padding: '0px',
+  overflowY: 'auto',
+  color: color.text(),
+  backgroundColor: highlightShape ? theme.palette.action.selected : color.background(),
+  ...(disableScrollbar && {
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+    scrollbarWidth: 'none',
+    '-ms-overflow-style': 'none',
+  }),
+}));
+
+const StyledChildren: any = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'noPadding',
+})(({ noPadding }) => ({
+  padding: noPadding ? 0 : '10px 8px',
+}));
+
+function TiptapContainer(props) {
+  const [adjustedWidth, setAdjustedWidth] = useState(null);
+  const rootRef = useRef(null);
+  const {
+    editor,
+    disabled,
+    children,
+    disableScrollbar,
+    activePlugins,
+    toolbarOpts,
+    responseAreaProps,
+    autoFocus,
+    minWidth,
+    width,
+    maxWidth,
+    minHeight,
+    height,
+    maxHeight,
+    highlightShape,
+    ref,
+  } = props;
+
+  useEffect(() => {
+    if (editor && autoFocus) {
+      Promise.resolve().then(() => {
+        editor.commands.focus('end');
+      });
+    }
+  }, [editor, autoFocus]);
+
+  useEffect(() => {
+    if (props.adjustWidthForLimit) {
+      const el = document.createElement('p');
+
+      el.style.visibility = 'hidden';
+      el.style.position = 'absolute';
+      el.textContent = 'W'.repeat(props.charactersLimit);
+
+      rootRef.current.appendChild(el);
+
+      setAdjustedWidth(`${el.offsetWidth + 27}px`);
+
+      el.remove();
+    }
+  }, [props.adjustWidthForLimit, props.charactersLimit]);
+
+  const sizeStyle = useMemo(
+    () => ({
+      width: valueToSize(adjustedWidth || width),
+      minWidth: valueToSize(minWidth),
+      maxWidth: valueToSize(maxWidth),
+      height: valueToSize(height),
+      minHeight: valueToSize(minHeight),
+      maxHeight: valueToSize(maxHeight),
+    }),
+    [adjustedWidth, minWidth, width, maxWidth, minHeight, height, maxHeight],
+  );
+
+  return (
+    <StyledRoot
+      noBorder={toolbarOpts && toolbarOpts.noBorder}
+      error={toolbarOpts && toolbarOpts.error}
+      className={props.className}
+      style={{ width: sizeStyle.width, minWidth: sizeStyle.minWidth, maxWidth: sizeStyle.maxWidth }}
+      ref={rootRef}
+    >
+      <StyledEditorHolder disableScrollbar={disableScrollbar} highlightShape={highlightShape}>
+        <StyledChildren noPadding={toolbarOpts && toolbarOpts.noPadding}>{children}</StyledChildren>
+      </StyledEditorHolder>
+
+      {editor && (
+        <StyledMenuBar
+          editor={editor}
+          responseAreaProps={responseAreaProps}
+          toolbarOpts={toolbarOpts}
+          activePlugins={activePlugins}
+          onChange={props.onChange}
+          autoWidthToolbar={props.autoWidthToolbar}
+        />
+      )}
+    </StyledRoot>
+  );
+}
+
+export default TiptapContainer;

package/src/components/characters/characterUtils.ts

@@ -0,0 +1,457 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/editable-html-tip-tap/src/components/characters/characterUtils.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 const spanishConfig = {
+  characters: [
+    ['á', 'é', 'í', 'ó', 'ú'],
+    ['Á', 'É', 'Í', 'Ó', 'Ú'],
+    ['—', '«', '»', 'ñ', 'ü'],
+    ['-', '¿', '¡', 'Ñ', 'Ü'],
+  ],
+};
+
+export const specialConfig = {
+  hasPreview: true,
+  characters: [
+    [
+      {
+        unicode: 'U+00A2',
+        description: 'CENT SIGN',
+        write: '¢',
+        label: '¢',
+      },
+      {
+        unicode: 'U+00BF',
+        description: 'INVERTED QUESTION MARK',
+        write: '¿',
+        label: '¿',
+      },
+      {
+        unicode: 'U+00B4',
+        description: 'ACUTE ACCENT',
+        write: '´',
+        label: '´',
+        extraProps: { style: { gridRow: 'span 2' } },
+      },
+      {
+        unicode: 'U+00E1',
+        description: 'LATIN SMALL LETTER A WITH ACUTE',
+        write: 'á',
+        label: 'á',
+      },
+      {
+        unicode: 'U+00E9',
+        description: 'LATIN SMALL LETTER E WITH ACUTE',
+        write: 'é',
+        label: 'é',
+      },
+      {
+        unicode: 'U+00ED',
+        description: 'LATIN SMALL LETTER I WITH ACUTE',
+        write: 'í',
+        label: 'í',
+      },
+      {
+        unicode: 'U+00F3',
+        description: 'LATIN SMALL LETTER O WITH ACUTE',
+        write: 'ó',
+        label: 'ó',
+      },
+      {
+        unicode: 'U+00FA',
+        description: 'LATIN SMALL LETTER U WITH ACUTE',
+        write: 'ú',
+        label: 'ú',
+      },
+      {
+        unicode: 'U+00F1',
+        description: 'LATIN SMALL LETTER N WITH TILDE',
+        write: 'ñ',
+        label: 'ñ',
+      },
+    ],
+    [
+      {
+        unicode: 'U+20AC',
+        description: 'EURO SIGN',
+        write: '€',
+        label: '€',
+      },
+      {
+        unicode: 'U+00A1',
+        description: 'INVERTED EXCLAMATION MARK',
+        write: '¡',
+        label: '¡',
+      },
+      {
+        unicode: 'U+00C1',
+        description: 'LATIN CAPITAL LETTER A WITH ACUTE',
+        write: 'Á',
+        label: 'Á',
+      },
+      {
+        unicode: 'U+00C9',
+        description: 'LATIN CAPITAL LETTER E WITH ACUTE',
+        write: 'É',
+        label: 'É',
+      },
+      {
+        unicode: 'U+00CD',
+        description: 'LATIN CAPITAL LETTER I WITH ACUTE',
+        write: 'Í',
+        label: 'Í',
+      },
+      {
+        unicode: 'U+00D3',
+        description: 'LATIN CAPITAL LETTER O WITH ACUTE',
+        write: 'Ó',
+        label: 'Ó',
+      },
+      {
+        unicode: 'U+00DA',
+        description: 'LATIN CAPITAL LETTER U WITH ACUTE',
+        write: 'Ú',
+        label: 'Ú',
+      },
+      {
+        unicode: 'U+00D1',
+        description: 'LATIN CAPITAL LETTER N WITH TILDE',
+        write: 'Ñ',
+        label: 'Ñ',
+      },
+    ],
+    [
+      {
+        unicode: 'U+00A3',
+        description: 'POUND SIGN',
+        write: '£',
+        label: '£',
+      },
+      {
+        unicode: 'U+00AB',
+        description: 'LEFT-POINTING DOUBLE ANGLE QUOTATION MARK',
+        write: '«',
+        label: '«',
+      },
+      {
+        unicode: 'U+005E',
+        description: 'CIRCUMFLEX ACCENT',
+        write: '^',
+        label: '^',
+        extraProps: { style: { gridRow: 'span 2' } },
+      },
+      {
+        unicode: 'U+00E2',
+        description: 'LATIN SMALL LETTER A WITH CIRCUMFLEX',
+        write: 'â',
+        label: 'â',
+      },
+      {
+        unicode: 'U+00EA',
+        description: 'LATIN SMALL LETTER E WITH CIRCUMFLEX',
+        write: 'ê',
+        label: 'ê',
+      },
+      {
+        unicode: 'U+00EE',
+        description: 'LATIN SMALL LETTER I WITH CIRCUMFLEX',
+        write: 'î',
+        label: 'î',
+      },
+      {
+        unicode: 'U+00F4',
+        description: 'LATIN SMALL LETTER O WITH CIRCUMFLEX',
+        write: 'ô',
+        label: 'ô',
+      },
+      {
+        unicode: 'U+00FB',
+        description: 'LATIN SMALL LETTER U WITH CIRCUMFLEX',
+        write: 'û',
+        label: 'û',
+      },
+      {
+        unicode: 'U+00E7',
+        description: 'LATIN SMALL LETTER C WITH CEDILLA',
+        write: 'ç',
+        label: 'ç',
+      },
+    ],
+    [
+      {
+        unicode: 'U+00A5',
+        description: 'YEN SIGN',
+        write: '¥',
+        label: '¥',
+      },
+      {
+        unicode: 'U+00BB',
+        description: 'RIGHT-POINTING DOUBLE ANGLE QUOTATION MARK',
+        write: '»',
+        label: '»',
+      },
+      {
+        unicode: 'U+00C2',
+        description: 'LATIN CAPITAL LETTER A WITH CIRCUMFLEX',
+        write: 'Â',
+        label: 'Â',
+      },
+      {
+        unicode: 'U+00CA',
+        description: 'LATIN CAPITAL LETTER E WITH CIRCUMFLEX',
+        write: 'Ê',
+        label: 'Ê',
+      },
+      {
+        unicode: 'U+00CE',
+        description: 'LATIN CAPITAL LETTER I WITH CIRCUMFLEX',
+        write: 'Î',
+        label: 'Î',
+      },
+      {
+        unicode: 'U+00D4',
+        description: 'LATIN CAPITAL LETTER O WITH CIRCUMFLEX',
+        write: 'Ô',
+        label: 'Ô',
+      },
+      {
+        unicode: 'U+00DB',
+        description: 'LATIN CAPITAL LETTER U WITH CIRCUMFLEX',
+        write: 'Û',
+        label: 'Û',
+      },
+      {
+        unicode: 'U+00C7',
+        description: 'LATIN CAPITAL LETTER C WITH CEDILLA',
+        write: 'Ç',
+        label: 'Ç',
+      },
+    ],
+    [
+      {
+        unicode: 'U+200A',
+        description: 'HAIR SPACE',
+        write: String.fromCodePoint('0x200A'),
+        label: ' ',
+      },
+      {
+        unicode: 'U+00A7',
+        description: 'SECTION SIGN',
+        write: '§',
+        label: '§',
+      },
+      {
+        unicode: 'U+00A8',
+        description: 'DIAERESIS',
+        write: '¨',
+        label: '¨',
+        extraProps: { style: { gridRow: 'span 2' } },
+      },
+      {
+        unicode: 'U+00E4',
+        description: 'LATIN SMALL LETTER A WITH DIAERESIS',
+        write: 'ä',
+        label: 'ä',
+      },
+      {
+        unicode: 'U+00EB',
+        description: 'LATIN SMALL LETTER E WITH DIAERESIS',
+        write: 'ë',
+        label: 'ë',
+      },
+      {
+        unicode: 'U+00EF',
+        description: 'LATIN SMALL LETTER I WITH DIAERESIS',
+        write: 'ï',
+        label: 'ï',
+      },
+      {
+        unicode: 'U+00F6',
+        description: 'LATIN SMALL LETTER O WITH DIAERESIS',
+        write: 'ö',
+        label: 'ö',
+      },
+      {
+        unicode: 'U+00FC',
+        description: 'LATIN SMALL LETTER U WITH DIAERESIS',
+        write: 'ü',
+        label: 'ü',
+      },
+      {
+        unicode: 'U+00DF',
+        description: 'LATIN SMALL LETTER SHARP S',
+        write: 'ß',
+        label: 'ß',
+      },
+    ],
+    [
+      {
+        unicode: 'U+2009',
+        description: 'THIN SPACE',
+        write: String.fromCodePoint('0x2009'),
+        label: ' ',
+      },
+      {
+        unicode: 'U+2026',
+        description: 'HORIZONTAL ELLIPSIS',
+        write: '…',
+        label: '…',
+      },
+      {
+        unicode: 'U+00C4',
+        description: 'LATIN CAPITAL LETTER A WITH DIAERESIS',
+        write: 'Ä',
+        label: 'Ä',
+      },
+      {
+        unicode: 'U+00CB',
+        description: 'LATIN CAPITAL LETTER E WITH DIAERESIS',
+        write: 'Ë',
+        label: 'Ë',
+      },
+      {
+        unicode: 'U+00CF',
+        description: 'LATIN CAPITAL LETTER I WITH DIAERESIS',
+        write: 'Ï',
+        label: 'Ï',
+      },
+      {
+        unicode: 'U+00D6',
+        description: 'LATIN CAPITAL LETTER O WITH DIAERESIS',
+        write: 'Ö',
+        label: 'Ö',
+      },
+      {
+        unicode: 'U+00DC',
+        description: 'LATIN CAPITAL LETTER U WITH DIAERESIS',
+        write: 'Ü',
+        label: 'Ü',
+      },
+      {
+        unicode: 'U+2212',
+        description: 'MINUS SIGN',
+        write: '−',
+        label: '−',
+      },
+    ],
+    [
+      {
+        unicode: 'U+00A0',
+        description: 'NO-BREAK SPACE',
+        write: String.fromCodePoint('0x00A0'),
+        label: ' ',
+      },
+      {
+        unicode: 'U+2022',
+        description: 'BULLET',
+        write: '•',
+        label: '•',
+      },
+      {
+        unicode: 'U+0060',
+        description: 'GRAVE ACCENT',
+        write: '`',
+        label: '`',
+        extraProps: { style: { gridRow: 'span 2' } },
+      },
+      {
+        unicode: 'U+00E0',
+        description: 'LATIN SMALL LETTER A WITH GRAVE',
+        write: 'à',
+        label: 'à',
+      },
+      {
+        unicode: 'U+00E8',
+        description: 'LATIN SMALL LETTER E WITH GRAVE',
+        write: 'è',
+        label: 'è',
+      },
+      {
+        unicode: 'U+00EC',
+        description: 'LATIN SMALL LETTER I WITH GRAVE',
+        write: 'ì',
+        label: 'ì',
+      },
+      {
+        unicode: 'U+00F2',
+        description: 'LATIN SMALL LETTER O WITH GRAVE',
+        write: 'ò',
+        label: 'ò',
+      },
+      {
+        unicode: 'U+00F9',
+        description: 'LATIN SMALL LETTER U WITH GRAVE',
+        write: 'ù',
+        label: 'ù',
+      },
+      {
+        unicode: 'U+2013',
+        description: 'EN DASH',
+        write: '–',
+        label: '–',
+      },
+    ],
+    [
+      {
+        unicode: 'U+2003',
+        description: 'EM SPACE',
+        write: String.fromCodePoint('0x2003'),
+        label: ' ',
+      },
+      {
+        unicode: 'U+25E6',
+        description: 'WHITE BULLET',
+        write: '◦',
+        label: '◦',
+      },
+      {
+        unicode: 'U+00C0',
+        description: 'LATIN CAPITAL LETTER A WITH GRAVE',
+        write: 'À',
+        label: 'À',
+      },
+      {
+        unicode: 'U+00C8',
+        description: 'LATIN CAPITAL LETTER E WITH GRAVE',
+        write: 'È',
+        label: 'È',
+      },
+      {
+        unicode: 'U+00CC',
+        description: 'LATIN CAPITAL LETTER I WITH GRAVE',
+        write: 'Ì',
+        label: 'Ì',
+      },
+      {
+        unicode: 'U+00D2',
+        description: 'LATIN CAPITAL LETTER O WITH GRAVE',
+        write: 'Ò',
+        label: 'Ò',
+      },
+      {
+        unicode: 'U+00D9',
+        description: 'LATIN CAPITAL LETTER U WITH GRAVE',
+        write: 'Ù',
+        label: 'Ù',
+      },
+      {
+        unicode: 'U+2014',
+        description: 'EM DASH',
+        write: '—',
+        label: '—',
+      },
+    ],
+  ],
+};
+
+export const characterIcons = {
+  spanish: 'ñ',
+  special: '€',
+};