aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/formattedText/nodes_rts.ts
diff options
context:
space:
mode:
authorGeireann Lindfield Roberts <60007097+geireann@users.noreply.github.com>2022-07-06 16:02:25 -0700
committerGitHub <noreply@github.com>2022-07-06 16:02:25 -0700
commita9f704fbd5676bb9a8adf4c4f7ea61bf9b3f7603 (patch)
treedbfeadbc48f25964fab8581e7c862bf0e734bcf0 /src/client/views/nodes/formattedText/nodes_rts.ts
parent85e290ee7a666412570f2bae43a9b62d35b425f2 (diff)
parent023b00927522279dfb87adbaeac6f312f3c6162a (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.ts361
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
+};