Add scripts and functionality to import DM1 TTL files and images (#229)

client/package.json

@@ -16,6 +16,7 @@
     "prosemirror-schema-basic": "^1.0.0",
     "prosemirror-schema-list": "^1.0.0",
     "prosemirror-state": "^1.1.0",
+    "prosemirror-tables": "^0.8.1",
     "prosemirror-transform": "^1.0.10",
     "prosemirror-view": "^1.2.0",
     "react": "^16.4.1",

client/src/TextResource.js

@@ -30,6 +30,8 @@ import { toggleMark } from 'prosemirror-commands';
 import { exampleSetup } from 'prosemirror-example-setup';
 import { undo, redo } from "prosemirror-history"
 import { keymap } from "prosemirror-keymap"
+import {tableEditing, columnResizing, tableNodes } from "prosemirror-tables"
+import { goToNextCell } from "prosemirror-tables"
 
 import { schema } from './TextSchema';
 import { addMark, removeMark } from './TextCommands';
@@ -104,12 +106,21 @@ class TextResource extends Component {
     }
 
     const marks = schema.spec.marks.addBefore('link', 'highlight', highlightSpec)
+    let nodes = addListNodes( schema.spec.nodes, 'paragraph block*', 'block')
+    nodes = nodes.append( tableNodes({
+        tableGroup: "block",
+        cellContent: "block+",
+        cellAttributes: {
+          background: {
+            default: null,
+            getFromDOM(dom) { return dom.style.backgroundColor || null },
+            setDOMAttr(value, attrs) { if (value) attrs.style = (attrs.style || "") + `background-color: ${value};` }
+          }
+        }
+    }))
 
     // create schema based on prosemirror-schema-basic
-    return new Schema({
-      nodes: addListNodes(schema.spec.nodes, 'paragraph block*', 'block'),
-      marks: marks
-    });
+    return new Schema({ nodes, marks });
   }
 
   getEditorState() {
@@ -132,9 +143,16 @@ class TextResource extends Component {
       menuBar: false
     });
 
-    // add keyboard commands
+    // add table and history commands
     plugins.push( 
-      keymap({"Mod-z": undo, "Mod-y": redo})
+      columnResizing(),
+      tableEditing(),
+      keymap({
+        "Mod-z": undo, 
+        "Mod-y": redo, 
+        "Tab": goToNextCell(1),
+        "Shift-Tab": goToNextCell(-1)
+      })
     );
 
     // create a new editor state
@@ -287,6 +305,10 @@ class TextResource extends Component {
         }
       }
 
+      // to allow resize of tables
+      document.execCommand("enableObjectResizing", false, false)
+      document.execCommand("enableInlineTableEditing", false, false)
+
       this.setState( { ...this.state, editorView });
     }
   }

client/src/TextSchema.js

@@ -1,10 +1,9 @@
 import {Schema} from "prosemirror-model"
+import {textStyle} from "./TextStyleMarkSpec"
 
 const pDOM = ["p", 0], blockquoteDOM = ["blockquote", 0], hrDOM = ["hr"],
       preDOM = ["pre", ["code", 0]], brDOM = ["br"]
 
-const fontSizeRegEx = /font-size: (.*);/
-
 // :: Object
 // [Specs](#model.NodeSpec) for the nodes defined in this schema.
 export const nodes = {
@@ -146,19 +145,7 @@ export const marks = {
     }
   },
 
-  textStyle: {
-    attrs: {fontSize: {default: 'normal'}},
-    parseDOM: [{tag: "span", getAttrs(dom) {
-      let styleAttr = dom.getAttribute("style")
-      let matches = styleAttr.match(fontSizeRegEx);
-      let fontSize = matches && matches.length > 1 ? matches[1] : {};
-      return { fontSize }
-    }}], 
-    toDOM(mark) {
-        let fontSize=mark.attrs.fontSize; 
-        return ["span", { style: `font-size:${fontSize}` }, 0] 
-    }
-  },
+  textStyle: textStyle,
 
   // :: MarkSpec A strong mark. Rendered as `<strong>`, parse rules
   // also match `<b>` and `font-weight: bold`.

client/src/TextStyleMarkSpec.js

@@ -0,0 +1,55 @@
+
+// Add new CSS styles here
+const supportedTextStyles = { 
+    color: { cssKey: "color", default: "#000" },
+    fontSize: { cssKey: "font-size", default: "normal" }, 
+    textDecoration: { cssKey: "text-decoration", default: "none" }
+}
+
+// The textStyle ProseMirror MarkSpec
+export const textStyle = {
+    attrs: textStyleMarkAttributes(),
+    parseDOM: [{tag: "span", getAttrs(dom) {
+      return cssToMarkAttr( dom.getAttribute("style") )
+    }}], 
+    toDOM(mark) {
+      return ["span", { style: markAttrsToCSS( mark.attrs ) }, 0] 
+    }
+}
+
+function textStyleMarkAttributes() {
+    let markAttrs = {}
+    for( let styleKey of Object.keys(supportedTextStyles) ) {
+        const defaultValue = supportedTextStyles[styleKey].default
+        markAttrs[styleKey] = { default: defaultValue }
+    }
+    return markAttrs
+}
+
+function cssToMarkAttr( styleAttribute ) {
+    if( !styleAttribute ) return null
+    let foundStyles = {}
+    for( let styleKey of Object.keys(supportedTextStyles) ) {
+        const cssKey = supportedTextStyles[styleKey].cssKey
+        const styleRegEx = new RegExp(`${cssKey}:\\s*([^;]*)`)
+        let matches = styleAttribute.match(styleRegEx)
+        let value = matches && matches.length > 1 ? matches[1] : null;  
+        if( value ) {
+            foundStyles[styleKey] = value
+        }
+    }
+    return foundStyles
+}
+
+function markAttrsToCSS( attrs ) {
+    let styleStr = ""
+    for( let styleKey of Object.keys(supportedTextStyles) ) {
+        const cssKey = supportedTextStyles[styleKey].cssKey
+        const value = attrs[styleKey] 
+        if( value ) {
+            styleStr = styleStr.concat(`${cssKey}:${value};`)
+        }
+    }
+    return styleStr
+}
+

client/src/index.css

@@ -17,3 +17,46 @@ body {
 .ProseMirror:focus {
   outline: none;
 }
+
+.ProseMirror p {
+  margin: 2px;
+}
+
+.ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+.ProseMirror table {
+  border-collapse: collapse;
+  border: 1px gray solid;
+  table-layout: fixed;
+  width: 100%;
+  overflow: hidden;
+}
+.ProseMirror td, .ProseMirror th {
+  vertical-align: top;
+  padding: 5px;
+  border: 1px gray solid;
+  box-sizing: border-box;
+  position: relative;
+}
+.ProseMirror .column-resize-handle {
+  position: absolute;
+  right: -2px; top: 0; bottom: 0;
+  width: 4px;
+  z-index: 20;
+  background-color: #adf;
+  pointer-events: none;
+}
+.ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+/* Give selected cells a blue overlay */
+.ProseMirror .selectedCell:after {
+  z-index: 2;
+  position: absolute;
+  content: "";
+  left: 0; right: 0; top: 0; bottom: 0;
+  background: rgba(200, 200, 255, 0.4);
+  pointer-events: none;
+}

client/yarn.lock

@@ -6843,6 +6843,17 @@ prosemirror-state@^1.0.0, prosemirror-state@^1.1.0:
     prosemirror-model "^1.0.0"
     prosemirror-transform "^1.0.0"
 
+prosemirror-tables@^0.8.1:
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/prosemirror-tables/-/prosemirror-tables-0.8.1.tgz#ea99ad4effec99dd4e2fdb0b33cce4d2547eed83"
+  integrity sha512-6eY8I+NkyrXAQ1gmYkKo7XDLZaj0iGutdc/zT0+VMY15IzgBINwcRP62+miaCTuneLTKufMYzfUB37NjGJaetw==
+  dependencies:
+    prosemirror-keymap "^1.0.0"
+    prosemirror-model "^1.0.0"
+    prosemirror-state "^1.0.0"
+    prosemirror-transform "^1.0.0"
+    prosemirror-view "^1.0.0"
+
 prosemirror-transform@^1.0.0, prosemirror-transform@^1.0.10, prosemirror-transform@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/prosemirror-transform/-/prosemirror-transform-1.1.3.tgz#28cfdf1f9ee514edc40466be7b7db39eed545fdf"

convert/dm-prose-mirror.js

@@ -1,5 +1,5 @@
 const { Schema } = require('prosemirror-model');
-const { schema } = require('prosemirror-schema-basic');
+const { schema } = require('./dm-text-schema');
 const { addListNodes } = require('prosemirror-schema-list');
 
 function createDocumentSchema() {