Play: Add/gutenberg - DO NOT DELETE

lib/gutenberg/formulas.tsx

@@ -0,0 +1,185 @@
+import { registerBlockType } from '@wordpress/blocks';
+import { TextareaControl } from '@wordpress/components';
+import { createElement as el } from '@wordpress/element';
+
+import './formula-converter';
+
+const Base64 = {
+  // private property
+  _keyStr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=',
+
+  // public method for encoding
+  encode: function(input) {
+    var output = '';
+    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
+    var i = 0;
+
+    input = Base64._utf8_encode(input);
+
+    while (i < input.length) {
+      chr1 = input.charCodeAt(i++);
+      chr2 = input.charCodeAt(i++);
+      chr3 = input.charCodeAt(i++);
+
+      enc1 = chr1 >> 2;
+      enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
+      enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
+      enc4 = chr3 & 63;
+
+      if (isNaN(chr2)) {
+        enc3 = enc4 = 64;
+      } else if (isNaN(chr3)) {
+        enc4 = 64;
+      }
+
+      output =
+        output +
+        this._keyStr.charAt(enc1) +
+        this._keyStr.charAt(enc2) +
+        this._keyStr.charAt(enc3) +
+        this._keyStr.charAt(enc4);
+    } // Whend
+
+    return output;
+  }, // End Function encode
+
+  // public method for decoding
+  decode: function(input) {
+    var output = '';
+    var chr1, chr2, chr3;
+    var enc1, enc2, enc3, enc4;
+    var i = 0;
+
+    input = input.replace(/[^A-Za-z0-9\+\/\=]/g, '');
+    while (i < input.length) {
+      enc1 = this._keyStr.indexOf(input.charAt(i++));
+      enc2 = this._keyStr.indexOf(input.charAt(i++));
+      enc3 = this._keyStr.indexOf(input.charAt(i++));
+      enc4 = this._keyStr.indexOf(input.charAt(i++));
+
+      chr1 = (enc1 << 2) | (enc2 >> 4);
+      chr2 = ((enc2 & 15) << 4) | (enc3 >> 2);
+      chr3 = ((enc3 & 3) << 6) | enc4;
+
+      output = output + String.fromCharCode(chr1);
+
+      if (enc3 != 64) {
+        output = output + String.fromCharCode(chr2);
+      }
+
+      if (enc4 != 64) {
+        output = output + String.fromCharCode(chr3);
+      }
+    } // Whend
+
+    output = Base64._utf8_decode(output);
+
+    return output;
+  }, // End Function decode
+
+  // private method for UTF-8 encoding
+  _utf8_encode: function(string) {
+    var utftext = '';
+    string = string.replace(/\r\n/g, '\n');
+
+    for (var n = 0; n < string.length; n++) {
+      var c = string.charCodeAt(n);
+
+      if (c < 128) {
+        utftext += String.fromCharCode(c);
+      } else if (c > 127 && c < 2048) {
+        utftext += String.fromCharCode((c >> 6) | 192);
+        utftext += String.fromCharCode((c & 63) | 128);
+      } else {
+        utftext += String.fromCharCode((c >> 12) | 224);
+        utftext += String.fromCharCode(((c >> 6) & 63) | 128);
+        utftext += String.fromCharCode((c & 63) | 128);
+      }
+    } // Next n
+
+    return utftext;
+  }, // End Function _utf8_encode
+
+  // private method for UTF-8 decoding
+  _utf8_decode: function(utftext) {
+    var string = '';
+    var i = 0;
+    var c, c1, c2, c3;
+    c = c1 = c2 = 0;
+
+    while (i < utftext.length) {
+      c = utftext.charCodeAt(i);
+
+      if (c < 128) {
+        string += String.fromCharCode(c);
+        i++;
+      } else if (c > 191 && c < 224) {
+        c2 = utftext.charCodeAt(i + 1);
+        string += String.fromCharCode(((c & 31) << 6) | (c2 & 63));
+        i += 2;
+      } else {
+        c2 = utftext.charCodeAt(i + 1);
+        c3 = utftext.charCodeAt(i + 2);
+        string += String.fromCharCode(
+          ((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)
+        );
+        i += 3;
+      }
+    } // Whend
+
+    return string;
+  }, // End Function _utf8_decode
+};
+
+const attributes = {
+  formula: { type: 'string' },
+  rendered: {
+    type: 'string',
+    source: 'attribute',
+    selector: 'img',
+    attribute: 'src',
+    default: '',
+  },
+};
+
+const Edit = ({
+  attributes: { formula, rendered },
+  className,
+  isSelected,
+  setAttributes,
+}) =>
+  el('div', { className }, [
+    isSelected &&
+      el(
+        TextareaControl,
+        {
+          label: 'Formula source',
+          value: formula,
+          onChange: newFormula => {
+            const formulaSVG = window.MathJax.tex2svg(
+              newFormula
+            ).innerHTML.replace(/<\/svg>.*/, '</svg>');
+            const formulaURI = Base64.encode(formulaSVG);
+
+            setAttributes({
+              formula: newFormula,
+              rendered: 'data:image/svg+xml;base64,' + formulaURI,
+            });
+          },
+        },
+        formula
+      ),
+    el('div', {}, el('img', { src: rendered })),
+  ]);
+
+const Save = ({ attributes: { rendered }, className }) =>
+  el('div', { className }, el('img', { src: rendered }));
+
+registerBlockType('dmsnell/formula', {
+  title: 'Formula Entry',
+  icon: 'welcome-write-blog',
+  category: 'common',
+  attributes: attributes,
+  edit: Edit,
+  save: Save,
+});

lib/gutenberg/index.tsx

@@ -0,0 +1,104 @@
+import React, { FunctionComponent } from 'react';
+import { connect } from 'react-redux';
+import {
+  BlockEditorKeyboardShortcuts,
+  BlockEditorProvider,
+  BlockList,
+  ObserveTyping,
+  WritingFlow,
+} from '@wordpress/block-editor';
+import {
+  getBlockTypes,
+  parse,
+  rawHandler,
+  serialize,
+  unregisterBlockType,
+} from '@wordpress/blocks';
+import {
+  DropZoneProvider,
+  Popover,
+  SlotFillProvider,
+} from '@wordpress/components';
+import '@wordpress/editor';
+import { useState } from '@wordpress/element';
+import { registerCoreBlocks } from '@wordpress/block-library';
+import '@wordpress/format-library';
+
+import * as S from '../state';
+
+type StateProps = {
+  content: string;
+};
+
+type Props = StateProps;
+
+registerCoreBlocks();
+import './formulas';
+
+const allowedBlockTypes = new Set([
+  'core/paragraph',
+  'core/heading',
+  'core/quote',
+  'core/list',
+  'core/code',
+  'core/preformatted',
+  'core/separator',
+  'dmsnell/formula',
+]);
+
+getBlockTypes()
+  .filter(({ name }) => !allowedBlockTypes.has(name))
+  .forEach(({ name }) => unregisterBlockType(name));
+
+export const GutenbergEditor: FunctionComponent<Props> = ({
+  content,
+  noteId,
+  saveNote,
+}) => {
+  const [oldId, setOldId] = useState(noteId);
+  const [blocks, setBlocks] = useState(parse(content));
+
+  if (oldId !== noteId) {
+    setOldId(noteId);
+    setBlocks(parse(content));
+  }
+
+  if (content.length > 0 && blocks.length === 0) {
+    setBlocks(
+      content
+        .split('\n\n')
+        .reduce((bs, s) => bs.concat(rawHandler({ HTML: s })), [])
+    );
+  }
+
+  return (
+    <SlotFillProvider>
+      <DropZoneProvider>
+        <BlockEditorProvider
+          value={blocks}
+          onInput={setBlocks}
+          onChange={blocks => saveNote(serialize(blocks))}
+          settings={{}}
+        >
+          <div className="editor-styles-wrapper">
+            <Popover.Slot name="block-toolbar" />
+            <BlockEditorKeyboardShortcuts />
+            <WritingFlow>
+              <ObserveTyping>
+                <BlockList />
+              </ObserveTyping>
+            </WritingFlow>
+          </div>
+          <Popover.Slot />
+        </BlockEditorProvider>
+      </DropZoneProvider>
+    </SlotFillProvider>
+  );
+};
+
+const mapStateToProps: S.MapState<StateProps> = state => ({
+  content: state.ui.note?.data?.content || '',
+  noteId: state.ui.note?.id,
+});
+
+export default connect(mapStateToProps)(GutenbergEditor);