@pie-lib/editable-html-tip-tap 1.0.2 → 1.0.4

package/src/components/TiptapContainer.jsx

@@ -0,0 +1,96 @@
+import React, { useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+
+import styles from '../styles/editorContainerStyles';
+import { valueToSize } from '../utils/size';
+
+import StyledMenuBar from './MenuBar';
+
+function TiptapContainer(props) {
+  const {
+    editor,
+    disabled,
+    classes,
+    children,
+    disableUnderline,
+    disableScrollbar,
+    activePlugins,
+    toolbarOpts,
+    responseAreaProps,
+    autoFocus,
+    minWidth,
+    width,
+    maxWidth,
+    minHeight,
+    height,
+    maxHeight,
+  } = props;
+
+  const holderNames = classNames(classes.editorHolder, {
+    [classes.readOnly]: disabled,
+    [classes.disabledUnderline]: disableUnderline,
+    [classes.disabledScrollbar]: disableScrollbar,
+  });
+
+  useEffect(() => {
+    if (editor && autoFocus) {
+      Promise.resolve().then(() => {
+        editor.commands.focus('end');
+      });
+    }
+  }, [editor, autoFocus]);
+
+  const sizeStyle = useMemo(
+    () => ({
+      width: valueToSize(width),
+      minWidth: valueToSize(minWidth),
+      maxWidth: valueToSize(maxWidth),
+      height: valueToSize(height),
+      minHeight: valueToSize(minHeight),
+      maxHeight: valueToSize(maxHeight),
+    }),
+    [minWidth, width, maxWidth, minHeight, height, maxHeight],
+  );
+
+  return (
+    <div
+      className={classNames(
+        {
+          [classes.noBorder]: toolbarOpts && toolbarOpts.noBorder,
+          [classes.error]: toolbarOpts && toolbarOpts.error,
+        },
+        classes.root,
+        props.className,
+      )}
+      style={{ width: sizeStyle.width, minWidth: sizeStyle.minWidth, maxWidth: sizeStyle.maxWidth }}
+    >
+      <div className={holderNames}>
+        <div
+          className={classNames(
+            {
+              [classes.noPadding]: toolbarOpts && toolbarOpts.noPadding,
+            },
+            classes.children,
+          )}
+        >
+          {children}
+        </div>
+      </div>
+
+      {editor && (
+        <StyledMenuBar
+          editor={editor}
+          responseAreaProps={responseAreaProps}
+          toolbarOpts={toolbarOpts}
+          activePlugins={activePlugins}
+          onChange={props.onChange}
+        />
+      )}
+    </div>
+  );
+}
+
+const EditorContainer = withStyles(styles)(TiptapContainer);
+
+export default EditorContainer;

package/src/components/characters/characterUtils.js

@@ -0,0 +1,127 @@
+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: 'Ñ',
+      },
+    ],
+    // remaining rows kept identical to original utils.js...
+  ],
+};
+
+export const characterIcons = {
+  spanish: 'ñ',
+  special: '€',
+};

package/src/{plugins/image/image-toolbar.jsx → components/image/ImageToolbar.jsx}

@@ -5,8 +5,8 @@ import ReactDOM from 'react-dom';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
 
-import { MarkButton } from '../toolbar/toolbar-buttons';
-import AltDialog from './alt-dialog';
+import AltDialog from './AltDialog';
+import { MarkButton } from '../common/toolbar-buttons';
 
 const log = debug('@pie-lib:editable-html:plugins:image:image-toolbar');
 

package/src/{plugins/image/insert-image-handler.js → components/image/InsertImageHandler.js}

@@ -1,4 +1,3 @@
-import { Data } from 'slate';
 import debug from 'debug';
 
 const log = debug('@pie-lib:editable-html:image:insert-image-handler');

package/src/{plugins/media/media-dialog.js → components/media/MediaDialog.js}

@@ -107,7 +107,7 @@ export class MediaDialog extends React.Component {
     super(props);
 
     const { ends, height, src, starts, type, uploadSoundSupport, url, urlToUse, width } = props;
-    const showUploadFile = uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video';
+    const showUploadFile = uploadSoundSupport?.add && uploadSoundSupport?.delete && type !== 'video' && !src;
 
     this.state = {
       ends: ends || 0,
@@ -252,7 +252,7 @@ export class MediaDialog extends React.Component {
     const { type } = this.props;
 
     if (type && type === 'audio') {
-      this.checkAudio();
+      this.checkAudio(value);
       return;
     } else if (type && type === 'video') {
       this.checkVideo(value);

package/src/{plugins/respArea/drag-in-the-blank → components/respArea/DragInTheBlank}/choice.jsx

@@ -7,7 +7,7 @@ import { renderMath } from '@pie-lib/math-rendering';
 import { withStyles } from '@material-ui/core/styles';
 import classnames from 'classnames';
 
-import { GripIcon } from '../icons';
+import { GripIcon } from '../../icons/RespArea';
 
 const useStyles = withStyles((theme) => ({
   content: {

package/src/{plugins/respArea/inline-dropdown/index.jsx → components/respArea/InlineDropdown.jsx}

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import PropTypes from 'prop-types';
 import { NodeViewWrapper } from '@tiptap/react';
-import { Chevron } from '../icons';
+import { Chevron } from '../icons/RespArea';
 
 const InlineDropdown = (props) => {
   const { editor, node, getPos, options, selected } = props;

package/src/components/respArea/ToolbarIcon.jsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+
+export const Chevron = (props) => {
+  const { direction, style } = props;
+  const rotate = (() => {
+    switch (direction) {
+      case 'down':
+        return 90;
+      case 'up':
+        return -90;
+      case 'left':
+        return 180;
+      default:
+        return 0;
+    }
+  })();
+
+  return (
+    <svg
+      style={{
+        transform: `rotate(${rotate}deg)`,
+        ...style,
+      }}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" fill="currentColor" />
+    </svg>
+  );
+};
+
+export const GripIcon = ({ style }) => (
+  <span style={style}>
+    <svg
+      style={{
+        margin: '0 -16px',
+      }}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M9 3H7v2h2V3zm0 4H7v2h2V7zm0 4H7v2h2v-2zm0 4H7v2h2v-2zm0 4H7v2h2v-2zm4-16h-2v2h2V3zm0 4h-2v2h2V7zm0 4h-2v2h2v-2zm0 4h-2v2h2v-2zm0 4h-2v2h2v-2z" />
+    </svg>
+    <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+      <path d="M9 3H7v2h2V3zm0 4H7v2h2V7zm0 4H7v2h2v-2zm0 4H7v2h2v-2zm0 4H7v2h2v-2zm4-16h-2v2h2V3zm0 4h-2v2h2V7zm0 4h-2v2h2v-2zm0 4h-2v2h2v-2zm0 4h-2v2h2v-2z" />
+    </svg>
+  </span>
+);
+
+const styles = (theme) => ({
+  icon: {
+    fontFamily: 'Cerebri Sans !important',
+    fontSize: theme.typography.fontSize,
+    fontWeight: 'bold',
+    lineHeight: '14px',
+    position: 'relative',
+    top: '7px',
+    width: '110px',
+    height: '28px',
+    whiteSpace: 'nowrap',
+  },
+});
+
+export const ToolbarIcon = withStyles(styles)(({ classes }) => <div className={classes.icon}>+ Response Area</div>);

package/src/extensions/component.jsx

@@ -6,8 +6,8 @@ import debug from 'debug';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import { withStyles } from '@material-ui/core/styles';
 import { NodeViewWrapper } from '@tiptap/react';
-import InsertImageHandler from '../plugins/image/insert-image-handler';
-import ImageToolbar from '../plugins/image/image-toolbar';
+import InsertImageHandler from '../components/image/InsertImageHandler';
+import ImageToolbar from '../components/image/ImageToolbar';
 import CustomToolbarWrapper from './custom-toolbar-wrapper';
 
 const log = debug('@pie-lib:editable-html:plugins:image:component');

package/src/extensions/custom-toolbar-wrapper.jsx

@@ -1,11 +1,10 @@
 import React, { useCallback } from 'react';
-import IconButton from "@material-ui/core/IconButton";
-import Delete from "@material-ui/icons/Delete";
-import { DoneButton } from "../plugins/toolbar/done-button";
-import classNames from "classnames";
-import { PIE_TOOLBAR__CLASS } from "../constants";
-import { withStyles } from "@material-ui/core/styles";
-import { Toolbar } from "../plugins/toolbar/toolbar";
+import IconButton from '@material-ui/core/IconButton';
+import Delete from '@material-ui/icons/Delete';
+import classNames from 'classnames';
+import { PIE_TOOLBAR__CLASS } from '../constants';
+import { withStyles } from '@material-ui/core/styles';
+import { DoneButton } from '../components/common/done-button';
 
 function CustomToolbarWrapper(props) {
   const {

package/src/extensions/extended-table.js

@@ -0,0 +1,27 @@
+import { Table } from '@tiptap/extension-table';
+
+const ExtendedTable = Table.extend({
+  addAttributes() {
+    return {
+      border: { default: '1' },
+    };
+  },
+  renderHTML(props) {
+    const originalTable = this.parent(props);
+    const { border } = props.HTMLAttributes;
+
+    const previousStyle = `${originalTable[1].style}${originalTable[1].style.match(/.*; */) ? '' : ';'}`;
+
+    originalTable[1].style = `${previousStyle}
+    width: 100%;
+    color: var(--pie-text, black);
+    table-layout: fixed;
+    border-collapse: collapse;
+    background-color: var(--pie-background, rgba(255, 255, 255))`;
+    originalTable[1].border = border ? border : '1';
+
+    return originalTable;
+  },
+});
+
+export default ExtendedTable;

package/src/extensions/image.js

@@ -1,6 +1,6 @@
 import { Node, mergeAttributes } from '@tiptap/core';
-import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
-import React, { useRef, useState, useCallback } from 'react';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+import React from 'react';
 import ImageComponent from './component';
 
 // ---- Tiptap Extension ---- //

package/src/extensions/index.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import compact from 'lodash/compact';
+import isEmpty from 'lodash/isEmpty';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:plugins');
+export const ALL_PLUGINS = [
+  'bold',
+  // 'code',
+  'html',
+  'extraCSSRules',
+  'italic',
+  'underline',
+  'strikethrough',
+  'bulleted-list',
+  'numbered-list',
+  'image',
+  'math',
+  'languageCharacters',
+  'text-align',
+  'blockquote',
+  'h3',
+  'table',
+  'video',
+  'audio',
+  'responseArea',
+  'redo',
+  'undo',
+  'superscript',
+  'subscript',
+];
+
+export const DEFAULT_EXTENSIONS = ALL_PLUGINS.filter((plug) => !['responseArea', 'h3', 'blockquote'].includes(plug));
+
+export const buildExtensions = (activeExtensions, customExtensions, opts) => {
+  log('[buildPlugins] opts: ', opts);
+
+  activeExtensions = activeExtensions || DEFAULT_EXTENSIONS;
+
+  const addIf = (key, shouldAdd = true) => activeExtensions.includes(key) && shouldAdd && key;
+
+  const imagePlugin = opts.image && opts.image.onDelete;
+  const mathPlugin = opts.math;
+  const respAreaPlugin = opts.responseArea && opts.responseArea.type;
+  const cssPlugin = !isEmpty(opts.extraCSSRules);
+
+  const languageCharactersPlugins = opts?.languageCharacters || [];
+
+  return compact([
+    addIf('table'),
+    addIf('bold'),
+    // addIf('code', MarkHotkey({ key: '`', type: 'code', icon: <Code /> })),
+    addIf('italic'),
+    addIf('strikethrough'),
+    addIf('underline'),
+    // icon should be modifies accordingly
+    addIf('superscript'),
+    // icon should be modifies accordingly
+    addIf('subscript'),
+    addIf('image', imagePlugin),
+    addIf('video'),
+    addIf('audio'),
+    addIf('math', mathPlugin),
+    ...languageCharactersPlugins.map((plugin) => addIf('languageCharacters', plugin)),
+    addIf('text-align'),
+    addIf('blockquote'),
+    addIf('h3'),
+    addIf('bulleted-list'),
+    addIf('numbered-list'),
+    addIf('undo'),
+    addIf('redo'),
+    addIf('responseArea', respAreaPlugin),
+    addIf('css', cssPlugin),
+    addIf('html', !!opts.html),
+  ]);
+};

package/src/extensions/media.js

@@ -2,8 +2,8 @@ import React, { useEffect } from 'react';
 import ReactDOM from 'react-dom';
 import { mergeAttributes, Node } from '@tiptap/core';
 import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react';
-import MediaDialog from '../plugins/media/media-dialog';
-import MediaToolbar from '../plugins/media/media-toolbar';
+import MediaDialog from '../components/media/MediaDialog';
+import MediaToolbar from '../components/media/MediaToolbar';
 
 export const Media = Node.create({
   name: 'media',
@@ -136,15 +136,17 @@ export default function MediaNodeView({ editor, node, updateAttributes, deleteNo
   const handleEdit = () => {
     insertDialog({
       ...node.attrs,
+      options: options,
       edit: true,
       callback: (val, data) => {
         if (val) {
           updateAttributes(data);
-        } else {
-          deleteNode();
         }
 
-        editor.chain().focus().run();
+        editor
+          .chain()
+          .focus()
+          .run();
       },
     });
   };
@@ -161,7 +163,10 @@ export default function MediaNodeView({ editor, node, updateAttributes, deleteNo
           deleteNode();
         }
 
-        editor.chain().focus().run();
+        editor
+          .chain()
+          .focus()
+          .run();
       },
     });
   }, []);
@@ -170,7 +175,7 @@ export default function MediaNodeView({ editor, node, updateAttributes, deleteNo
     <NodeViewWrapper data-type={type} style={{ width, height }}>
       {tag === 'audio' ? (
         <audio controls controlsList="nodownload">
-          <source src={src} />
+          <source type="audio/mp3" src={src} />
         </audio>
       ) : (
         <iframe src={src} allowFullScreen frameBorder="0" />

package/src/extensions/responseArea.js

@@ -1,12 +1,12 @@
 // InlineNodes.js
 import React from 'react';
-import { Node, ReactNodeViewRenderer, ReactRenderer } from "@tiptap/react";
-import ExplicitConstructedResponse from '../plugins/respArea/explicit-constructed-response';
-import DragInTheBlank from '../plugins/respArea/drag-in-the-blank';
-import InlineDropdown from '../plugins/respArea/inline-dropdown';
-import { Extension } from "@tiptap/core";
-import { MathToolbar } from "@pie-lib/math-toolbar";
-import tippy from "tippy.js";
+import { Node, ReactNodeViewRenderer, ReactRenderer } from '@tiptap/react';
+import ExplicitConstructedResponse from '../components/respArea/ExplicitConstructedResponse';
+import DragInTheBlank from '../components/respArea/DragInTheBlank/DragInTheBlank';
+import InlineDropdown from '../components/respArea/InlineDropdown';
+import { Extension } from '@tiptap/core';
+import { MathToolbar } from '@pie-lib/math-toolbar';
+import tippy from 'tippy.js';
 
 export const ResponseAreaExtension = Extension.create({
   name: 'responseArea',