@manuscripts/style-guide 1.12.4 → 1.12.5-LEAN-3571.0

package/dist/cjs/components/RichText/RichText.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichText = void 0;
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+const react_1 = __importStar(require("react"));
+const schema_1 = require("./schema");
+const RichText = ({ className, value }) => {
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const state = prosemirror_state_1.EditorState.create({
+            doc: (0, schema_1.parseRichText)(value),
+            schema: schema_1.schema,
+        });
+        const view = new prosemirror_view_1.EditorView(null, {
+            editable: () => false,
+            state,
+        });
+        editorRef.current && editorRef.current.replaceChildren(view.dom);
+    }, [value]);
+    return react_1.default.createElement("div", { className: className, ref: editorRef });
+};
+exports.RichText = RichText;

package/dist/cjs/components/RichText/RichTextField.js

@@ -0,0 +1,90 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextField = void 0;
+const prosemirror_commands_1 = require("prosemirror-commands");
+const prosemirror_history_1 = require("prosemirror-history");
+const prosemirror_keymap_1 = require("prosemirror-keymap");
+const prosemirror_state_1 = require("prosemirror-state");
+const prosemirror_view_1 = require("prosemirror-view");
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const schema_1 = require("./schema");
+const Container = styled_components_1.default.div `
+  & .ProseMirror {
+    font-family: ${(props) => props.theme.font.family.sans};
+    font-size: ${(props) => props.theme.font.size.medium};
+    line-height: 1.25;
+    color: ${(props) => props.theme.colors.text.primary};
+    border-radius: ${(props) => props.theme.grid.radius.small};
+    border: 1px solid ${(props) => props.theme.colors.text.muted};
+    padding: ${(props) => props.theme.grid.unit * 2}px
+      ${(props) => props.theme.grid.unit * 3}px;
+
+    &:focus {
+      outline: none;
+      border-color: ${(props) => props.theme.colors.border.field.hover};
+      background-color: ${(props) => props.theme.colors.background.fifth};
+    }
+  }
+`;
+const RichTextField = ({ value, onChange, }) => {
+    const editorRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const dispatch = (view, tr) => {
+            const { state, transactions } = view.state.applyTransaction(tr);
+            view.updateState(state);
+            if (onChange && transactions.some((tr) => tr.docChanged)) {
+                const value = (0, schema_1.serializeRichText)(state.doc);
+                onChange(value);
+            }
+        };
+        const state = prosemirror_state_1.EditorState.create({
+            doc: (0, schema_1.parseRichText)(value),
+            plugins: [
+                (0, prosemirror_history_1.history)(),
+                (0, prosemirror_keymap_1.keymap)(prosemirror_commands_1.baseKeymap),
+                (0, prosemirror_keymap_1.keymap)({
+                    'Mod-b': (0, prosemirror_commands_1.toggleMark)(schema_1.schema.marks.bold),
+                    'Mod-i': (0, prosemirror_commands_1.toggleMark)(schema_1.schema.marks.italic),
+                    'Mod-y': prosemirror_history_1.redo,
+                    'Mod-z': prosemirror_history_1.undo,
+                }),
+            ],
+            schema: schema_1.schema,
+        });
+        const view = new prosemirror_view_1.EditorView(null, {
+            editable: () => true,
+            state,
+            dispatchTransaction: (tr) => dispatch(view, tr),
+        });
+        editorRef.current && editorRef.current.appendChild(view.dom);
+    }, [value, onChange]);
+    return react_1.default.createElement(Container, { ref: editorRef });
+};
+exports.RichTextField = RichTextField;

package/dist/cjs/components/RichText/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextField = exports.RichText = void 0;
+var RichText_1 = require("./RichText");
+Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
+var RichTextField_1 = require("./RichTextField");
+Object.defineProperty(exports, "RichTextField", { enumerable: true, get: function () { return RichTextField_1.RichTextField; } });

package/dist/cjs/components/RichText/schema.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.serializeRichText = exports.parseRichText = exports.schema = void 0;
+const prosemirror_model_1 = require("prosemirror-model");
+exports.schema = new prosemirror_model_1.Schema({
+    marks: {
+        bold: {
+            parseDOM: [
+                {
+                    tag: 'b',
+                    getAttrs: (dom) => dom.style.fontWeight !== 'normal' && null,
+                },
+                {
+                    tag: 'strong',
+                },
+                {
+                    style: 'font-weight',
+                    getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
+                },
+            ],
+            toDOM() {
+                return ['b'];
+            },
+        },
+        italic: {
+            parseDOM: [
+                {
+                    tag: 'i',
+                },
+                {
+                    tag: 'em',
+                },
+                {
+                    style: 'font-style=italic',
+                },
+            ],
+            toDOM() {
+                return ['i'];
+            },
+        },
+        smallcaps: {
+            parseDOM: [
+                {
+                    style: 'font-variant=small-caps',
+                },
+                {
+                    style: 'font-variant-caps=small-caps',
+                },
+            ],
+            toDOM: () => [
+                'span',
+                {
+                    style: 'font-variant:small-caps',
+                },
+            ],
+        },
+        subscript: {
+            excludes: 'superscript',
+            group: 'position',
+            parseDOM: [
+                {
+                    tag: 'sub',
+                },
+                {
+                    style: 'vertical-align=sub',
+                },
+            ],
+            toDOM: () => ['sub'],
+        },
+        superscript: {
+            excludes: 'subscript',
+            group: 'position',
+            parseDOM: [
+                {
+                    tag: 'sup',
+                },
+                {
+                    style: 'vertical-align=super',
+                },
+            ],
+            toDOM: () => ['sup'],
+        },
+    },
+    nodes: {
+        text: {},
+        rich: {
+            content: 'text*',
+            marks: 'bold italic smallcaps subscript superscript',
+            parseDOM: [
+                {
+                    tag: 'div',
+                },
+            ],
+            toDOM: () => ['div', 0],
+        },
+    },
+    topNode: 'rich',
+});
+const parser = prosemirror_model_1.DOMParser.fromSchema(exports.schema);
+const serializer = prosemirror_model_1.DOMSerializer.fromSchema(exports.schema);
+const parseRichText = (value) => {
+    const node = document.createElement('div');
+    node.innerHTML = value;
+    return parser.parse(node);
+};
+exports.parseRichText = parseRichText;
+const serializeRichText = (node) => {
+    const element = serializer.serializeNode(node);
+    return element.innerHTML;
+};
+exports.serializeRichText = serializeRichText;

package/dist/cjs/index.js

@@ -49,6 +49,7 @@ __exportStar(require("./components/SaveStatus"), exports);
 __exportStar(require("./components/StyledModal"), exports);
 __exportStar(require("./components/TableFootnotesSelector"), exports);
 __exportStar(require("./components/Sidebar"), exports);
+__exportStar(require("./components/RichText"), exports);
 __exportStar(require("./components/TextField"), exports);
 __exportStar(require("./components/TextFieldContainer"), exports);
 __exportStar(require("./components/TextFieldError"), exports);

package/dist/es/components/RichText/RichText.js

@@ -0,0 +1,19 @@
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import React, { useEffect, useRef } from 'react';
+import { parseRichText, schema } from './schema';
+export const RichText = ({ className, value }) => {
+    const editorRef = useRef(null);
+    useEffect(() => {
+        const state = EditorState.create({
+            doc: parseRichText(value),
+            schema,
+        });
+        const view = new EditorView(null, {
+            editable: () => false,
+            state,
+        });
+        editorRef.current && editorRef.current.replaceChildren(view.dom);
+    }, [value]);
+    return React.createElement("div", { className: className, ref: editorRef });
+};

package/dist/es/components/RichText/RichTextField.js

@@ -0,0 +1,60 @@
+import { baseKeymap, toggleMark } from 'prosemirror-commands';
+import { history, redo, undo } from 'prosemirror-history';
+import { keymap } from 'prosemirror-keymap';
+import { EditorState } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
+import React, { useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import { parseRichText, schema, serializeRichText } from './schema';
+const Container = styled.div `
+  & .ProseMirror {
+    font-family: ${(props) => props.theme.font.family.sans};
+    font-size: ${(props) => props.theme.font.size.medium};
+    line-height: 1.25;
+    color: ${(props) => props.theme.colors.text.primary};
+    border-radius: ${(props) => props.theme.grid.radius.small};
+    border: 1px solid ${(props) => props.theme.colors.text.muted};
+    padding: ${(props) => props.theme.grid.unit * 2}px
+      ${(props) => props.theme.grid.unit * 3}px;
+
+    &:focus {
+      outline: none;
+      border-color: ${(props) => props.theme.colors.border.field.hover};
+      background-color: ${(props) => props.theme.colors.background.fifth};
+    }
+  }
+`;
+export const RichTextField = ({ value, onChange, }) => {
+    const editorRef = useRef(null);
+    useEffect(() => {
+        const dispatch = (view, tr) => {
+            const { state, transactions } = view.state.applyTransaction(tr);
+            view.updateState(state);
+            if (onChange && transactions.some((tr) => tr.docChanged)) {
+                const value = serializeRichText(state.doc);
+                onChange(value);
+            }
+        };
+        const state = EditorState.create({
+            doc: parseRichText(value),
+            plugins: [
+                history(),
+                keymap(baseKeymap),
+                keymap({
+                    'Mod-b': toggleMark(schema.marks.bold),
+                    'Mod-i': toggleMark(schema.marks.italic),
+                    'Mod-y': redo,
+                    'Mod-z': undo,
+                }),
+            ],
+            schema,
+        });
+        const view = new EditorView(null, {
+            editable: () => true,
+            state,
+            dispatchTransaction: (tr) => dispatch(view, tr),
+        });
+        editorRef.current && editorRef.current.appendChild(view.dom);
+    }, [value, onChange]);
+    return React.createElement(Container, { ref: editorRef });
+};

package/dist/es/components/RichText/index.js

@@ -0,0 +1,2 @@
+export { RichText } from './RichText';
+export { RichTextField } from './RichTextField';

package/dist/es/components/RichText/schema.js

@@ -0,0 +1,106 @@
+import { DOMParser, DOMSerializer, Schema, } from 'prosemirror-model';
+export const schema = new Schema({
+    marks: {
+        bold: {
+            parseDOM: [
+                {
+                    tag: 'b',
+                    getAttrs: (dom) => dom.style.fontWeight !== 'normal' && null,
+                },
+                {
+                    tag: 'strong',
+                },
+                {
+                    style: 'font-weight',
+                    getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
+                },
+            ],
+            toDOM() {
+                return ['b'];
+            },
+        },
+        italic: {
+            parseDOM: [
+                {
+                    tag: 'i',
+                },
+                {
+                    tag: 'em',
+                },
+                {
+                    style: 'font-style=italic',
+                },
+            ],
+            toDOM() {
+                return ['i'];
+            },
+        },
+        smallcaps: {
+            parseDOM: [
+                {
+                    style: 'font-variant=small-caps',
+                },
+                {
+                    style: 'font-variant-caps=small-caps',
+                },
+            ],
+            toDOM: () => [
+                'span',
+                {
+                    style: 'font-variant:small-caps',
+                },
+            ],
+        },
+        subscript: {
+            excludes: 'superscript',
+            group: 'position',
+            parseDOM: [
+                {
+                    tag: 'sub',
+                },
+                {
+                    style: 'vertical-align=sub',
+                },
+            ],
+            toDOM: () => ['sub'],
+        },
+        superscript: {
+            excludes: 'subscript',
+            group: 'position',
+            parseDOM: [
+                {
+                    tag: 'sup',
+                },
+                {
+                    style: 'vertical-align=super',
+                },
+            ],
+            toDOM: () => ['sup'],
+        },
+    },
+    nodes: {
+        text: {},
+        rich: {
+            content: 'text*',
+            marks: 'bold italic smallcaps subscript superscript',
+            parseDOM: [
+                {
+                    tag: 'div',
+                },
+            ],
+            toDOM: () => ['div', 0],
+        },
+    },
+    topNode: 'rich',
+});
+const parser = DOMParser.fromSchema(schema);
+const serializer = DOMSerializer.fromSchema(schema);
+export const parseRichText = (value) => {
+    const node = document.createElement('div');
+    node.innerHTML = value;
+    return parser.parse(node);
+};
+export const serializeRichText = (node) => {
+    const element = serializer.serializeNode(node);
+    return element.innerHTML;
+};

package/dist/es/index.js

@@ -29,6 +29,7 @@ export * from './components/SaveStatus';
 export * from './components/StyledModal';
 export * from './components/TableFootnotesSelector';
 export * from './components/Sidebar';
+export * from './components/RichText';
 export * from './components/TextField';
 export * from './components/TextFieldContainer';
 export * from './components/TextFieldError';

package/dist/types/components/RichText/RichText.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface RichTextProps {
+    className?: string;
+    value: string;
+}
+export declare const RichText: React.FC<RichTextProps>;

package/dist/types/components/RichText/RichTextField.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface RichTextFieldProps {
+    value: string;
+    onChange?: (value: string) => void;
+}
+export declare const RichTextField: React.FC<RichTextFieldProps>;

package/dist/types/components/RichText/index.d.ts

@@ -0,0 +1,2 @@
+export { RichText } from './RichText';
+export { RichTextField } from './RichTextField';

package/dist/types/components/RichText/schema.d.ts

@@ -0,0 +1,7 @@
+import { Node as ProsemirrorNode, Schema } from 'prosemirror-model';
+export type Nodes = 'text' | 'rich';
+export type Marks = 'bold' | 'italic' | 'smallcaps' | 'subscript' | 'superscript';
+export type RichTextSchema = Schema<Nodes, Marks>;
+export declare const schema: RichTextSchema;
+export declare const parseRichText: (value: string) => ProsemirrorNode;
+export declare const serializeRichText: (node: ProsemirrorNode) => string;

package/dist/types/index.d.ts

@@ -30,6 +30,7 @@ export * from './components/SaveStatus';
 export * from './components/StyledModal';
 export * from './components/TableFootnotesSelector';
 export * from './components/Sidebar';
+export * from './components/RichText';
 export * from './components/TextField';
 export * from './components/TextFieldContainer';
 export * from './components/TextFieldError';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "1.12.4",
+  "version": "1.12.5-LEAN-3571.0",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",
@@ -41,6 +41,12 @@
     "fuzzysort": "^2.0.4",
     "lodash": "^4.17.21",
     "react": "^17.0.2",
+    "prosemirror-view": "1.32.7",
+    "prosemirror-state": "1.4.3",
+    "prosemirror-model": "1.19.4",
+    "prosemirror-history": "1.3.2",
+    "prosemirror-keymap": "1.2.2",
+    "prosemirror-commands": "1.5.2",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^17.0.2",
@@ -103,4 +109,4 @@
     "@types/react": "^17.0.2",
     "jackspeak": "2.1.1"
   }
-}
+}