diff options
| author | Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> | 2022-07-06 16:02:25 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-07-06 16:02:25 -0700 |
| commit | a9f704fbd5676bb9a8adf4c4f7ea61bf9b3f7603 (patch) | |
| tree | dbfeadbc48f25964fab8581e7c862bf0e734bcf0 /src/client/views/nodes/formattedText/nodes_rts.ts | |
| parent | 85e290ee7a666412570f2bae43a9b62d35b425f2 (diff) | |
| parent | 023b00927522279dfb87adbaeac6f312f3c6162a (diff) | |
Merge pull request #95 from brown-dash/geireann-eslint-prettier
integrating eslint prettier
Diffstat (limited to 'src/client/views/nodes/formattedText/nodes_rts.ts')
| -rw-r--r-- | src/client/views/nodes/formattedText/nodes_rts.ts | 361 |
1 files changed, 202 insertions, 159 deletions
diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts index 2fe0a67cb..5142b7da6 100644 --- a/src/client/views/nodes/formattedText/nodes_rts.ts +++ b/src/client/views/nodes/formattedText/nodes_rts.ts @@ -1,15 +1,18 @@ -import React = require("react"); -import { DOMOutputSpecArray, Fragment, MarkSpec, Node, NodeSpec, Schema, Slice } from "prosemirror-model"; -import { bulletList, listItem, orderedList } from 'prosemirror-schema-list'; -import { ParagraphNodeSpec, toParagraphDOM, getParagraphNodeAttrs } from "./ParagraphNodeSpec"; +import React = require('react'); +import { DOMOutputSpec, Node, NodeSpec } from 'prosemirror-model'; +import { listItem, orderedList } from 'prosemirror-schema-list'; +import { ParagraphNodeSpec, toParagraphDOM, getParagraphNodeAttrs } from './ParagraphNodeSpec'; -const blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"], - preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0]; +const blockquoteDOM: DOMOutputSpec = ['blockquote', 0], + hrDOM: DOMOutputSpec = ['hr'], + preDOM: DOMOutputSpec = ['pre', ['code', 0]], + brDOM: DOMOutputSpec = ['br'], + ulDOM: DOMOutputSpec = ['ul', 0]; function formatAudioTime(time: number) { time = Math.round(time); const hours = Math.floor(time / 60 / 60); - const minutes = Math.floor(time / 60) - (hours * 60); + const minutes = Math.floor(time / 60) - hours * 60; const seconds = time % 60; return minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0'); @@ -19,67 +22,70 @@ function formatAudioTime(time: number) { export const nodes: { [index: string]: NodeSpec } = { // :: NodeSpec The top level document node. doc: { - content: "block+" + content: 'block+', }, paragraph: ParagraphNodeSpec, audiotag: { - group: "block", + group: 'block', attrs: { timeCode: { default: 0 }, - audioId: { default: "" }, - textId: { default: "" } + audioId: { default: '' }, + textId: { default: '' }, }, toDOM(node) { - return ['audiotag', + return [ + 'audiotag', { class: node.attrs.textId, // style: see FormattedTextBox.scss - "data-timecode": node.attrs.timeCode, - "data-audioid": node.attrs.audioId, - "data-textid": node.attrs.textId, + 'data-timecode': node.attrs.timeCode, + 'data-audioid': node.attrs.audioId, + 'data-textid': node.attrs.textId, }, - formatAudioTime(node.attrs.timeCode.toString()) + formatAudioTime(node.attrs.timeCode.toString()), ]; }, parseDOM: [ { - tag: "audiotag", getAttrs(dom: any) { + tag: 'audiotag', + getAttrs(dom: any) { return { - timeCode: dom.getAttribute("data-timecode"), - audioId: dom.getAttribute("data-audioid"), - textId: dom.getAttribute("data-textid") + timeCode: dom.getAttribute('data-timecode'), + audioId: dom.getAttribute('data-audioid'), + textId: dom.getAttribute('data-textid'), }; - } + }, }, - ] + ], }, footnote: { - group: "inline", - content: "inline*", + group: 'inline', + content: 'inline*', inline: true, attrs: { - visibility: { default: false } + visibility: { default: false }, }, // This makes the view treat the node as a leaf, even though it // technically has content atom: true, - toDOM: () => ["footnote", 0], - parseDOM: [{ tag: "footnote" }] + toDOM: () => ['footnote', 0], + parseDOM: [{ tag: 'footnote' }], }, // :: NodeSpec A blockquote (`<blockquote>`) wrapping one or more blocks. blockquote: { - content: "block*", - group: "block", + content: 'block*', + group: 'block', defining: true, - parseDOM: [{ tag: "blockquote" }], - toDOM() { return blockquoteDOM; } + parseDOM: [{ tag: 'blockquote' }], + toDOM() { + return blockquoteDOM; + }, }, - // blockquote: { // ...ParagraphNodeSpec, // defining: true, @@ -97,9 +103,11 @@ export const nodes: { [index: string]: NodeSpec } = { // :: NodeSpec A horizontal rule (`<hr>`). horizontal_rule: { - group: "block", - parseDOM: [{ tag: "hr" }], - toDOM() { return hrDOM; } + group: 'block', + parseDOM: [{ tag: 'hr' }], + toDOM() { + return hrDOM; + }, }, // :: NodeSpec A heading textblock, with a `level` attribute that @@ -112,12 +120,14 @@ export const nodes: { [index: string]: NodeSpec } = { level: { default: 1 }, }, defining: true, - parseDOM: [{ tag: "h1", attrs: { level: 1 } }, - { tag: "h2", attrs: { level: 2 } }, - { tag: "h3", attrs: { level: 3 } }, - { tag: "h4", attrs: { level: 4 } }, - { tag: "h5", attrs: { level: 5 } }, - { tag: "h6", attrs: { level: 6 } }], + parseDOM: [ + { tag: 'h1', attrs: { level: 1 } }, + { tag: 'h2', attrs: { level: 2 } }, + { tag: 'h3', attrs: { level: 3 } }, + { tag: 'h4', attrs: { level: 4 } }, + { tag: 'h5', attrs: { level: 5 } }, + { tag: 'h6', attrs: { level: 6 } }, + ], toDOM(node) { const dom = toParagraphDOM(node) as any; const level = node.attrs.level || 1; @@ -129,36 +139,38 @@ export const nodes: { [index: string]: NodeSpec } = { const level = Number(dom.nodeName.substring(1)) || 1; attrs.level = level; return attrs; - } + }, }, // :: NodeSpec A code listing. Disallows marks or non-text inline // nodes by default. Represented as a `<pre>` element with a // `<code>` element inside of it. code_block: { - content: "inline*", - marks: "_", - group: "block", + content: 'inline*', + marks: '_', + group: 'block', code: true, defining: true, - parseDOM: [{ tag: "pre", preserveWhitespace: "full" }], - toDOM() { return preDOM; } + parseDOM: [{ tag: 'pre', preserveWhitespace: 'full' }], + toDOM() { + return preDOM; + }, }, // :: NodeSpec The text node. text: { - group: "inline" + group: 'inline', }, dashComment: { attrs: { - docid: { default: "" }, + docid: { default: '' }, }, inline: true, - group: "inline", + group: 'inline', toDOM(node) { const attrs = { style: `width: 40px` }; - return ["span", { ...node.attrs, ...attrs }, "←"]; + return ['span', { ...node.attrs, ...attrs }, '←']; }, }, @@ -169,10 +181,10 @@ export const nodes: { [index: string]: NodeSpec } = { text: { default: undefined }, textslice: { default: undefined }, }, - group: "inline", + group: 'inline', toDOM(node) { const attrs = { style: `width: 40px` }; - return ["span", { ...node.attrs, ...attrs }]; + return ['span', { ...node.attrs, ...attrs }]; }, }, @@ -187,27 +199,30 @@ export const nodes: { [index: string]: NodeSpec } = { width: { default: 100 }, alt: { default: null }, title: { default: null }, - float: { default: "left" }, - location: { default: "add:right" }, - docid: { default: "" } + float: { default: 'left' }, + location: { default: 'add:right' }, + docid: { default: '' }, }, - group: "inline", + group: 'inline', draggable: true, - parseDOM: [{ - tag: "img[src]", getAttrs(dom: any) { - return { - src: dom.getAttribute("src"), - title: dom.getAttribute("title"), - alt: dom.getAttribute("alt"), - width: Math.min(100, Number(dom.getAttribute("width"))), - }; - } - }], + parseDOM: [ + { + tag: 'img[src]', + getAttrs(dom: any) { + return { + src: dom.getAttribute('src'), + title: dom.getAttribute('title'), + alt: dom.getAttribute('alt'), + width: Math.min(100, Number(dom.getAttribute('width'))), + }; + }, + }, + ], // TODO if we don't define toDom, dragging the image crashes. Why? toDOM(node) { const attrs = { style: `width: ${node.attrs.width}` }; - return ["img", { ...node.attrs, ...attrs }]; - } + return ['img', { ...node.attrs, ...attrs }]; + }, }, dashDoc: { @@ -216,82 +231,87 @@ export const nodes: { [index: string]: NodeSpec } = { width: { default: 200 }, height: { default: 100 }, title: { default: null }, - float: { default: "right" }, + float: { default: 'right' }, hidden: { default: false }, // whether dashComment node has toggle the dashDoc's display off - fieldKey: { default: "" }, - docid: { default: "" }, - alias: { default: "" } + fieldKey: { default: '' }, + docid: { default: '' }, + alias: { default: '' }, }, - group: "inline", + group: 'inline', draggable: false, toDOM(node) { const attrs = { style: `width: ${node.attrs.width}, height: ${node.attrs.height}` }; - return ["div", { ...node.attrs, ...attrs }]; - } + return ['div', { ...node.attrs, ...attrs }]; + }, }, dashField: { inline: true, attrs: { - fieldKey: { default: "" }, - docid: { default: "" }, - hideKey: { default: false } + fieldKey: { default: '' }, + docid: { default: '' }, + hideKey: { default: false }, }, - group: "inline", + group: 'inline', draggable: false, toDOM(node) { const attrs = { style: `width: ${node.attrs.width}, height: ${node.attrs.height}` }; - return ["div", { ...node.attrs, ...attrs }]; - } + return ['div', { ...node.attrs, ...attrs }]; + }, }, equation: { inline: true, attrs: { - fieldKey: { default: "" }, + fieldKey: { default: '' }, }, atom: true, - group: "inline", + group: 'inline', draggable: false, toDOM(node) { const attrs = { style: `width: ${node.attrs.width}, height: ${node.attrs.height}` }; - return ["div", { ...node.attrs, ...attrs }]; - } + return ['div', { ...node.attrs, ...attrs }]; + }, }, video: { inline: true, attrs: { src: {}, - width: { default: "100px" }, + width: { default: '100px' }, alt: { default: null }, - title: { default: null } + title: { default: null }, }, - group: "inline", + group: 'inline', draggable: true, - parseDOM: [{ - tag: "video[src]", getAttrs(dom: any) { - return { - src: dom.getAttribute("src"), - title: dom.getAttribute("title"), - alt: dom.getAttribute("alt"), - width: Math.min(100, Number(dom.getAttribute("width"))), - }; - } - }], + parseDOM: [ + { + tag: 'video[src]', + getAttrs(dom: any) { + return { + src: dom.getAttribute('src'), + title: dom.getAttribute('title'), + alt: dom.getAttribute('alt'), + width: Math.min(100, Number(dom.getAttribute('width'))), + }; + }, + }, + ], toDOM(node) { const attrs = { style: `width: ${node.attrs.width}` }; - return ["video", { ...node.attrs, ...attrs }]; - } + return ['video', { ...node.attrs, ...attrs }]; + }, }, // :: NodeSpec A hard line break, represented in the DOM as `<br>`. hard_break: { inline: true, - group: "inline", + group: 'inline', selectable: false, - parseDOM: [{ tag: "br" }], - toDOM() { return brDOM; } + parseDOM: [{ tag: 'br' }], + toDOM() { + return brDOM; + }, }, ordered_list: { @@ -300,85 +320,108 @@ export const nodes: { [index: string]: NodeSpec } = { group: 'block', attrs: { bulletStyle: { default: 0 }, - mapStyle: { default: "decimal" },// "decimal", "multi", "bullet" - fontColor: { default: "inherit" }, + mapStyle: { default: 'decimal' }, // "decimal", "multi", "bullet" + fontColor: { default: 'inherit' }, fontSize: { default: undefined }, fontFamily: { default: undefined }, visibility: { default: true }, - indent: { default: undefined } + indent: { default: undefined }, }, parseDOM: [ { - tag: "ul", getAttrs(dom: any) { + tag: 'ul', + getAttrs(dom: any) { return { - bulletStyle: dom.getAttribute("data-bulletStyle"), - mapStyle: dom.getAttribute("data-mapStyle"), + bulletStyle: dom.getAttribute('data-bulletStyle'), + mapStyle: dom.getAttribute('data-mapStyle'), fontColor: dom.style.color, - fontSize: dom.style["font-size"], - fontFamily: dom.style["font-family"], - indent: dom.style["margin-left"] + fontSize: dom.style['font-size'], + fontFamily: dom.style['font-family'], + indent: dom.style['margin-left'], }; - } + }, }, { - style: 'list-style-type=disc', getAttrs(dom: any) { - return { mapStyle: "bullet" }; - } + style: 'list-style-type=disc', + getAttrs(dom: any) { + return { mapStyle: 'bullet' }; + }, }, { - tag: "ol", getAttrs(dom: any) { + tag: 'ol', + getAttrs(dom: any) { return { - bulletStyle: dom.getAttribute("data-bulletStyle"), - mapStyle: dom.getAttribute("data-mapStyle"), + bulletStyle: dom.getAttribute('data-bulletStyle'), + mapStyle: dom.getAttribute('data-mapStyle'), fontColor: dom.style.color, - fontSize: dom.style["font-size"], - fontFamily: dom.style["font-family"], - indent: dom.style["margin-left"] + fontSize: dom.style['font-size'], + fontFamily: dom.style['font-family'], + indent: dom.style['margin-left'], }; - } - }], - toDOM(node: Node<any>) { - const map = node.attrs.bulletStyle ? node.attrs.mapStyle + node.attrs.bulletStyle : ""; - const fsize = node.attrs.fontSize ? `font-size: ${node.attrs.fontSize};` : ""; - const ffam = node.attrs.fontFamily ? `font-family:${node.attrs.fontFamily};` : ""; - const fcol = node.attrs.fontColor ? `color: ${node.attrs.fontColor};` : ""; - const marg = node.attrs.indent ? `margin-left: ${node.attrs.indent};` : ""; - if (node.attrs.mapStyle === "bullet") { - return ['ul', { - "data-mapStyle": node.attrs.mapStyle, - "data-bulletStyle": node.attrs.bulletStyle, - style: `${fsize} ${ffam} ${fcol} ${marg}` - }, 0]; + }, + }, + ], + toDOM(node: Node) { + const map = node.attrs.bulletStyle ? node.attrs.mapStyle + node.attrs.bulletStyle : ''; + const fsize = node.attrs.fontSize ? `font-size: ${node.attrs.fontSize};` : ''; + const ffam = node.attrs.fontFamily ? `font-family:${node.attrs.fontFamily};` : ''; + const fcol = node.attrs.fontColor ? `color: ${node.attrs.fontColor};` : ''; + const marg = node.attrs.indent ? `margin-left: ${node.attrs.indent};` : ''; + if (node.attrs.mapStyle === 'bullet') { + return [ + 'ul', + { + 'data-mapStyle': node.attrs.mapStyle, + 'data-bulletStyle': node.attrs.bulletStyle, + style: `${fsize} ${ffam} ${fcol} ${marg}`, + }, + 0, + ]; } - return node.attrs.visibility ? - ['ol', { - class: `${map}-ol`, - "data-mapStyle": node.attrs.mapStyle, - "data-bulletStyle": node.attrs.bulletStyle, - style: `list-style: none; ${fsize} ${ffam} ${fcol} ${marg}` - }, 0] : - ['ol', { class: `${map}-ol`, style: `list-style: none;` }]; - } + return node.attrs.visibility + ? [ + 'ol', + { + class: `${map}-ol`, + 'data-mapStyle': node.attrs.mapStyle, + 'data-bulletStyle': node.attrs.bulletStyle, + style: `list-style: none; ${fsize} ${ffam} ${fcol} ${marg}`, + }, + 0, + ] + : ['ol', { class: `${map}-ol`, style: `list-style: none;` }]; + }, }, list_item: { ...listItem, attrs: { bulletStyle: { default: 0 }, - mapStyle: { default: "decimal" }, // "decimal", "multi", "bullet" - visibility: { default: true } + mapStyle: { default: 'decimal' }, // "decimal", "multi", "bullet" + visibility: { default: true }, }, content: '(paragraph|audiotag)+ | ((paragraph|audiotag)+ ordered_list)', - parseDOM: [{ - tag: "li", getAttrs(dom: any) { - return { mapStyle: dom.getAttribute("data-mapStyle"), bulletStyle: dom.getAttribute("data-bulletStyle") }; - } - }], + parseDOM: [ + { + tag: 'li', + getAttrs(dom: any) { + return { mapStyle: dom.getAttribute('data-mapStyle'), bulletStyle: dom.getAttribute('data-bulletStyle') }; + }, + }, + ], toDOM(node: any) { - const map = node.attrs.bulletStyle ? node.attrs.mapStyle + node.attrs.bulletStyle : ""; - return ["li", { class: `${map}`, "data-mapStyle": node.attrs.mapStyle, "data-bulletStyle": node.attrs.bulletStyle }, node.attrs.visibility ? 0 : - ["span", { style: `position: relative; width: 100%; height: 1.5em; overflow: hidden; display: ${node.attrs.mapStyle !== "bullet" ? "inline-block" : "list-item"}; text-overflow: ellipsis; white-space: pre` }, - `${node.firstChild?.textContent}...`]]; - } + const map = node.attrs.bulletStyle ? node.attrs.mapStyle + node.attrs.bulletStyle : ''; + return [ + 'li', + { class: `${map}`, 'data-mapStyle': node.attrs.mapStyle, 'data-bulletStyle': node.attrs.bulletStyle }, + node.attrs.visibility + ? 0 + : [ + 'span', + { style: `position: relative; width: 100%; height: 1.5em; overflow: hidden; display: ${node.attrs.mapStyle !== 'bullet' ? 'inline-block' : 'list-item'}; text-overflow: ellipsis; white-space: pre` }, + `${node.firstChild?.textContent}...`, + ], + ]; + }, }, -};
\ No newline at end of file +}; |
