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

package/src/styles/editorContainerStyles.js

@@ -0,0 +1,203 @@
+import { color } from '@pie-lib/render-ui';
+import { primary } from '../theme';
+
+const styles = (theme) => ({
+  root: {
+    position: 'relative',
+    padding: '0px',
+    border: '1px solid #ccc',
+    borderRadius: '4px',
+    cursor: 'text',
+    '& [data-slate-editor="true"]': {
+      wordBreak: 'break-word',
+      overflow: 'visible',
+      maxHeight: '500px',
+      // needed in order to be able to put the focus before a void element when it is the first one in the editor
+      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': {
+      borderLeft: '3px solid var(--gray-3)',
+      margin: '1.5rem 0',
+      paddingLeft: '1rem',
+    },
+
+    '& hr': {
+      border: 'none',
+      borderTop: '1px solid var(--gray-2)',
+      margin: '2rem 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',
+    },
+  },
+  children: {
+    padding: '10px 16px',
+  },
+  editorHolder: {
+    position: 'relative',
+    padding: '0px',
+    // overflowY: 'auto',
+    overflow: 'visible',
+    color: color.text(),
+    backgroundColor: color.background(),
+    '&::before': {
+      left: '0',
+      right: '0',
+      bottom: '0',
+      height: '1px',
+      content: '""',
+      position: 'absolute',
+      transition: 'background-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
+      pointerEvents: 'none',
+      backgroundColor: 'rgba(0, 0, 0, 0.42)',
+    },
+    '&::after': {
+      left: '0',
+      right: '0',
+      bottom: '0',
+      height: '1px',
+      content: '""',
+      position: 'absolute',
+      transform: 'scaleX(0)',
+      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 200ms linear',
+      backgroundColor: 'rgba(0, 0, 0, 0.42)',
+    },
+  },
+  disabledUnderline: {
+    '&::before': {
+      display: 'none',
+    },
+    '&::after': {
+      display: 'none',
+    },
+  },
+  disabledScrollbar: {
+    '&::-webkit-scrollbar': {
+      display: 'none',
+    },
+    scrollbarWidth: 'none',
+    '-ms-overflow-style': 'none',
+  },
+  readOnly: {
+    '&::before': {
+      background: 'transparent',
+      backgroundSize: '5px 1px',
+      backgroundImage: 'linear-gradient(to right, rgba(0, 0, 0, 0.42) 33%, transparent 0%)',
+      backgroundRepeat: 'repeat-x',
+      backgroundPosition: 'left top',
+    },
+    '&::after': {
+      left: '0',
+      right: '0',
+      bottom: '0',
+      height: '1px',
+      content: '""',
+      position: 'absolute',
+      transform: 'scaleX(0)',
+      transition: 'transform 200ms cubic-bezier(0.0, 0.0, 0.2, 1) 0ms, background-color 0ms linear',
+      backgroundColor: 'rgba(0, 0, 0, 0)',
+    },
+    '&:hover': {
+      '&::after': {
+        transform: 'scaleX(0)',
+        backgroundColor: theme.palette.common.black,
+        height: '2px',
+      },
+    },
+  },
+  error: {
+    border: `2px solid ${theme.palette.error.main} !important`,
+  },
+  noBorder: {
+    border: 'none',
+  },
+  noPadding: {
+    padding: 0,
+  },
+  toolbarOnTop: {
+    marginTop: '45px',
+  },
+});
+
+export default styles;

package/src/utils/size.js

@@ -0,0 +1,32 @@
+export const valueToSize = (v) => {
+  if (!v) {
+    return;
+  }
+
+  const calcRegex = /^calc\((.*)\)$/;
+
+  if (typeof v === 'string') {
+    if (v.endsWith('%')) {
+      return undefined;
+    }
+
+    if (
+      v.endsWith('px') ||
+      v.endsWith('vh') ||
+      v.endsWith('vw') ||
+      v.endsWith('ch') ||
+      v.endsWith('em') ||
+      v.match(calcRegex)
+    ) {
+      return v;
+    }
+
+    const value = parseInt(v, 10);
+
+    return Number.isNaN(value) ? value : `${value}px`;
+  }
+
+  if (typeof v === 'number') {
+    return `${v}px`;
+  }
+};

package/src/__tests__/editor.test.jsx

@@ -1,363 +0,0 @@
-import React from 'react';
-import { htmlToValue, valueToHtml } from '../index';
-import { Editor } from '../editor';
-import { shallow, configure } from 'enzyme';
-import debug from 'debug';
-
-import { mockComponents } from './utils';
-
-const log = debug('@pie-lib:editable-html:test');
-
-const value = htmlToValue('hi');
-
-const resizeWindow = (width, height) => {
-  window.innerWidth = width;
-  window.innerHeight = height;
-  window.dispatchEvent(new Event('resize'));
-};
-jest.mock('@pie-lib/math-toolbar', () => ({}));
-jest.mock('@pie-lib/math-input', () => {
-  HorizontalKeypad: () => <div>HorizontalKeypad</div>;
-});
-
-expect.extend({
-  toEqualHtml(value, html) {
-    const v = valueToHtml(value);
-    const pass = v === html;
-
-    return {
-      pass,
-      message: () => `expected ${html} to match ${v}`,
-    };
-  },
-});
-
-describe('logic', () => {
-  test('onFocus/onBlur saves the value', async () => {
-    const wrapper = shallow(
-      <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-    );
-
-    await wrapper.instance().onFocus();
-
-    const v = htmlToValue('hi');
-
-    expect(wrapper.state('stashedValue')).toEqualHtml('<div>hi</div>');
-
-    wrapper.instance().onChange({ value: htmlToValue('new value') });
-
-    expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
-
-    return wrapper
-      .instance()
-      .onBlur({})
-      .then(() => {
-        expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
-      });
-  });
-});
-
-test('onFocus does not change focus if related target is a button from language keypad', async () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  const event = {
-    relatedTarget: {
-      tagName: 'button',
-    },
-  };
-
-  const change = {
-    focus: jest.fn(),
-  };
-
-  wrapper.instance().keypadInteractionDetected = true;
-
-  await wrapper.instance().onFocus(event, change);
-
-  expect(change.focus).not.toHaveBeenCalled();
-});
-
-test('onFocus changes focus if related target is not a button from language keypad', async () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  const event = {
-    relatedTarget: {
-      tagName: 'div',
-    },
-  };
-
-  const change = {
-    focus: jest.fn(),
-  };
-
-  await wrapper.instance().onFocus(event, change);
-
-  expect(change.focus).toHaveBeenCalled();
-});
-
-test('onFocus stashes the value', async () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  await wrapper.instance().onFocus();
-
-  expect(wrapper.state('stashedValue')).toEqualHtml('<div>hi</div>');
-});
-
-test('onBlur does not set focusToolbar if related target is RawDoneButton', async () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  const toolbarElement = document.createElement('div');
-  const relatedTarget = document.createElement('button');
-  relatedTarget.className = 'RawDoneButton';
-  toolbarElement.className = 'toolbar';
-  toolbarElement.appendChild(relatedTarget);
-
-  wrapper.instance().toolbarRef = toolbarElement;
-  wrapper.instance().doneButtonRef.current = relatedTarget;
-
-  const event = { relatedTarget };
-
-  await wrapper.instance().onBlur(event);
-
-  expect(wrapper.state('focusToolbar')).toBe(false);
-});
-
-test('handleToolbarFocus sets focusToolbar to true', () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  wrapper.instance().handleToolbarFocus();
-  expect(wrapper.state('focusToolbar')).toBe(true);
-});
-
-test('handleToolbarBlur sets focusToolbar to false if toolbar does not contain focus', (done) => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  wrapper.instance().toolbarContainsFocus = jest.fn().mockReturnValue(false);
-
-  wrapper.instance().handleToolbarBlur();
-
-  setTimeout(() => {
-    expect(wrapper.state('focusToolbar')).toBe(false);
-    done();
-  }, 20);
-});
-
-test('handleToolbarBlur does not set focusToolbar to false if toolbar contains focus', (done) => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  wrapper.instance().toolbarContainsFocus = jest.fn().mockReturnValue(true);
-
-  wrapper.setState({ focusToolbar: true });
-
-  wrapper.instance().handleToolbarBlur();
-
-  setTimeout(() => {
-    expect(wrapper.state('focusToolbar')).toBe(true);
-    done();
-  }, 20);
-});
-
-test('toolbarContainsFocus correctly detects focus within toolbar', () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  const toolbarElement = document.createElement('div');
-  const activeElement = document.createElement('button');
-  toolbarElement.appendChild(activeElement);
-
-  Object.defineProperty(document, 'activeElement', {
-    value: activeElement,
-    configurable: true,
-  });
-
-  wrapper.instance().toolbarRef = toolbarElement;
-
-  expect(wrapper.instance().toolbarContainsFocus()).toBe(true);
-
-  Object.defineProperty(document, 'activeElement', {
-    value: document.createElement('div'),
-    configurable: true,
-  });
-
-  expect(wrapper.instance().toolbarContainsFocus()).toBe(false);
-});
-
-test('onBlur sets focusToolbar to true if related target is within toolbar', async () => {
-  const wrapper = shallow(
-    <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-  );
-
-  const toolbarElement = document.createElement('div');
-  const relatedTarget = document.createElement('button');
-  toolbarElement.className = 'toolbar';
-  toolbarElement.appendChild(relatedTarget);
-
-  wrapper.instance().toolbarRef = toolbarElement;
-
-  const event = { relatedTarget };
-
-  await wrapper.instance().onBlur(event);
-
-  expect(wrapper.state('focusToolbar')).toBe(true);
-});
-
-describe('buildSizeStyle', () => {
-  const wrapper = (extras) => {
-    const props = Object.assign({}, extras);
-    return shallow(
-      <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} {...props} />,
-    );
-  };
-
-  it('builds width with px', () => {
-    const w = wrapper({ width: 100 });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: '100px',
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-
-  it('returns undefined for % ', () => {
-    const w = wrapper({ height: '100%', width: '100%' });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: undefined,
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-
-  it('builds height', () => {
-    const w = wrapper({ height: 100 });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: undefined,
-      height: '100px',
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-
-  it('builds minHeight', () => {
-    const w = wrapper({ minHeight: 100 });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: undefined,
-      height: undefined,
-      minHeight: '100px',
-      maxHeight: undefined,
-    });
-  });
-
-  it('builds maxHeight', () => {
-    const w = wrapper({ maxHeight: 100 });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: undefined,
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: '100px',
-    });
-  });
-
-  it('builds width with calc()', () => {
-    const w = wrapper({ width: 'calc(10em + 42px)' });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: 'calc(10em + 42px)',
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-
-  it('builds width with ch', () => {
-    const w = wrapper({ width: '9ch' });
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: '9ch',
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-
-  it('builds', () => {
-    const w = wrapper({});
-    expect(w.instance().buildSizeStyle()).toEqual({
-      width: undefined,
-      height: undefined,
-      minHeight: undefined,
-      maxHeight: undefined,
-    });
-  });
-});
-
-describe('onResize', () => {
-  it('should display html of current state on Resize', () => {
-    const wrapper = shallow(
-      <Editor editorRef={jest.fn()} value={value} classes={{}} onChange={jest.fn()} onRef={jest.fn()} />,
-    );
-
-    resizeWindow(500, 300);
-    expect(wrapper.state('value')).toEqualHtml('<div>hi</div>');
-
-    wrapper.instance().onChange({ value: htmlToValue('new value') });
-    resizeWindow(1024, 768);
-    expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
-
-    resizeWindow(500, 300);
-    expect(wrapper.state('value')).toEqualHtml('<div>new value</div>');
-  });
-});
-
-describe('MathMl', () => {
-  beforeEach(() => {});
-
-  it('should not call runSerializationOnMarkup if mathMl props are not there', () => {
-    const runSerializationOnMarkup = jest.fn();
-
-    const wrapper = shallow(
-      <Editor
-        editorRef={jest.fn()}
-        value={value}
-        classes={{}}
-        onChange={jest.fn()}
-        onRef={jest.fn()}
-        runSerializationOnMarkup={runSerializationOnMarkup}
-      />,
-    );
-
-    expect(runSerializationOnMarkup).not.toHaveBeenCalled();
-  });
-
-  it('should call runSerializationOnMarkup if mmlEditing or mmlOutput are true', () => {
-    const runSerializationOnMarkup = jest.fn();
-
-    const wrapper = shallow(
-      <Editor
-        editorRef={jest.fn()}
-        value={value}
-        classes={{}}
-        onChange={jest.fn()}
-        onRef={jest.fn()}
-        runSerializationOnMarkup={runSerializationOnMarkup}
-        mathMlOptions={{ mmlOutput: true }}
-      />,
-    );
-
-    expect(runSerializationOnMarkup).toHaveBeenCalled();
-  });
-});