@manuscripts/style-guide 1.12.1-LEAN-3571.0 → 1.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -28,12 +28,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  exports.CitationEditor = void 0;
30
30
  const AnnotationEdit_1 = __importDefault(require("@manuscripts/assets/react/AnnotationEdit"));
31
- const CloseIconDark_1 = __importDefault(require("@manuscripts/assets/react/CloseIconDark"));
32
31
  const json_schema_1 = require("@manuscripts/json-schema");
33
32
  const react_1 = __importStar(require("react"));
34
33
  const styled_components_1 = __importDefault(require("styled-components"));
35
34
  const Button_1 = require("../Button");
36
35
  const Dialog_1 = require("../Dialog");
36
+ const icons_1 = require("../icons");
37
37
  const CitationViewer_1 = require("./CitationViewer");
38
38
  const ReferenceLine_1 = require("./ReferenceLine");
39
39
  const ReferenceSearch_1 = require("./ReferenceSearch");
@@ -52,8 +52,7 @@ const CitedItemActions = styled_components_1.default.div `
52
52
  margin-left: 12px;
53
53
 
54
54
  svg.remove-icon {
55
- height: ${(props) => props.theme.grid.unit * 4}px;
56
- width: ${(props) => props.theme.grid.unit * 4}px;
55
+ color: #6e6e6e;
57
56
  }
58
57
  `;
59
58
  const ActionButton = (0, styled_components_1.default)(Button_1.IconButton).attrs({
@@ -132,7 +131,7 @@ const CitationEditor = ({ query, rids, items, citationCounts, sources, onCite, o
132
131
  react_1.default.createElement(EditReferenceButton, { value: item._id, disabled: !canEdit, onClick: () => setEditingForm({ show: true, item: item }) },
133
132
  react_1.default.createElement(AnnotationEdit_1.default, { color: '#6E6E6E' })),
134
133
  react_1.default.createElement(ActionButton, { disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item._id }) },
135
- react_1.default.createElement(CloseIconDark_1.default, { className: 'remove-icon' }))))))),
134
+ react_1.default.createElement(icons_1.DeleteSolidIcon, { className: 'remove-icon' }))))))),
136
135
  react_1.default.createElement(ReferencesModal_1.ReferencesModal, { isOpen: editingForm.show, onCancel: () => setEditingForm({ show: false }), items: items, citationCounts: citationCounts, item: editingForm.item, onSave: onSave, onDelete: onDelete }),
137
136
  react_1.default.createElement(Actions, null,
138
137
  react_1.default.createElement(Button_1.IconTextButton, null),
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.DeleteSolidIcon = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const DeleteSolidIcon = (props) => (react_1.default.createElement("svg", { className: props.className, width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
9
+ react_1.default.createElement("path", { d: "M11.494 0.375H7.955C7.93 0.165 7.714 0 7.451 0H4.548C4.286 0 4.07 0.165 4.045 0.375H0.506C0.226 0.375 0 0.561 0 0.792V1.583C0 1.813 0.227 2 0.506 2H11.494C11.774 2 12 1.814 12 1.583V0.792C12 0.562 11.773 0.375 11.494 0.375ZM1 3V13.491C1 13.772 1.23 14 1.513 14H10.487C10.5541 14.0004 10.6207 13.9875 10.6829 13.9621C10.745 13.9367 10.8015 13.8993 10.8492 13.852C10.8969 13.8047 10.9347 13.7485 10.9606 13.6866C10.9865 13.6246 10.9999 13.5581 11 13.491V3H1ZM4.753 10.874C4.753 11.184 4.5 11.435 4.188 11.435C4.03886 11.4355 3.89559 11.3769 3.78966 11.2719C3.68373 11.1669 3.62379 11.0241 3.623 10.875V5.311C3.623 5.001 3.876 4.75 4.188 4.75C4.5 4.75 4.753 5 4.753 5.31V10.873V10.874ZM8.377 10.874C8.377 11.184 8.124 11.435 7.812 11.435C7.66286 11.4355 7.51959 11.3769 7.41366 11.2719C7.30773 11.1669 7.24779 11.0241 7.247 10.875V5.311C7.247 5.001 7.5 4.75 7.812 4.75C8.124 4.75 8.377 5 8.377 5.31V10.873V10.874Z", fill: "#6E6E6E" })));
10
+ exports.DeleteSolidIcon = DeleteSolidIcon;
@@ -18,7 +18,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
18
18
  return (mod && mod.__esModule) ? mod : { "default": mod };
19
19
  };
20
20
  Object.defineProperty(exports, "__esModule", { value: true });
21
- exports.DeleteIcon = exports.PlusIcon = exports.PullQuoteIcon = exports.BlockQuoteIcon = exports.LeftArrow = exports.AnnotatorIcon = exports.ReadingIcon = exports.EditIcon = exports.UnsupportedFormatFileIcon = exports.MissingImage = exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.AddComment = exports.CloseOIcon = exports.CloseIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
21
+ exports.DeleteSolidIcon = exports.DeleteIcon = exports.PlusIcon = exports.PullQuoteIcon = exports.BlockQuoteIcon = exports.LeftArrow = exports.AnnotatorIcon = exports.ReadingIcon = exports.EditIcon = exports.UnsupportedFormatFileIcon = exports.MissingImage = exports.UploadIcon = exports.AttachIcon = exports.TaskStepNextIcon = exports.TaskStepDoneIcon = exports.TaskStepCurrentIcon = exports.ZoomOutIcon = exports.ZoomInIcon = exports.UserIcon = exports.TickMarkIcon = exports.SearchIcon = exports.ProjectsListIcon = exports.ProjectIcon = exports.ProjectNotificationIcon = exports.OrcidIcon = exports.GoogleIcon = exports.AddComment = exports.CloseOIcon = exports.CloseIcon = exports.BookmarkIcon = exports.BackArrowIcon = exports.AddIconInverted = exports.AddIconActive = exports.AddAuthor = void 0;
22
22
  var add_author_1 = require("./add-author");
23
23
  Object.defineProperty(exports, "AddAuthor", { enumerable: true, get: function () { return __importDefault(add_author_1).default; } });
24
24
  var add_icon_active_1 = require("./add-icon-active");
@@ -85,3 +85,5 @@ var plus_icon_1 = require("./plus-icon");
85
85
  Object.defineProperty(exports, "PlusIcon", { enumerable: true, get: function () { return __importDefault(plus_icon_1).default; } });
86
86
  var delete_icon_1 = require("./delete-icon");
87
87
  Object.defineProperty(exports, "DeleteIcon", { enumerable: true, get: function () { return delete_icon_1.DeleteIcon; } });
88
+ var delete_solid_icon_1 = require("./delete-solid-icon");
89
+ Object.defineProperty(exports, "DeleteSolidIcon", { enumerable: true, get: function () { return delete_solid_icon_1.DeleteSolidIcon; } });
package/dist/cjs/index.js CHANGED
@@ -49,7 +49,6 @@ __exportStar(require("./components/SaveStatus"), exports);
49
49
  __exportStar(require("./components/StyledModal"), exports);
50
50
  __exportStar(require("./components/TableFootnotesSelector"), exports);
51
51
  __exportStar(require("./components/Sidebar"), exports);
52
- __exportStar(require("./components/RichText"), exports);
53
52
  __exportStar(require("./components/TextField"), exports);
54
53
  __exportStar(require("./components/TextFieldContainer"), exports);
55
54
  __exportStar(require("./components/TextFieldError"), exports);
@@ -1,10 +1,10 @@
1
1
  import AnnotationEdit from '@manuscripts/assets/react/AnnotationEdit';
2
- import CloseIconDark from '@manuscripts/assets/react/CloseIconDark';
3
2
  import { buildBibliographyItem, } from '@manuscripts/json-schema';
4
3
  import React, { useMemo, useState } from 'react';
5
4
  import styled from 'styled-components';
6
5
  import { ButtonGroup, IconButton, IconTextButton, PrimaryButton, SecondaryButton, } from '../Button';
7
6
  import { Category, Dialog } from '../Dialog';
7
+ import { DeleteSolidIcon } from '../icons';
8
8
  import { CitedItem, CitedItems } from './CitationViewer';
9
9
  import { ReferenceLine } from './ReferenceLine';
10
10
  import { ReferenceSearch } from './ReferenceSearch';
@@ -23,8 +23,7 @@ const CitedItemActions = styled.div `
23
23
  margin-left: 12px;
24
24
 
25
25
  svg.remove-icon {
26
- height: ${(props) => props.theme.grid.unit * 4}px;
27
- width: ${(props) => props.theme.grid.unit * 4}px;
26
+ color: #6e6e6e;
28
27
  }
29
28
  `;
30
29
  const ActionButton = styled(IconButton).attrs({
@@ -103,7 +102,7 @@ export const CitationEditor = ({ query, rids, items, citationCounts, sources, on
103
102
  React.createElement(EditReferenceButton, { value: item._id, disabled: !canEdit, onClick: () => setEditingForm({ show: true, item: item }) },
104
103
  React.createElement(AnnotationEdit, { color: '#6E6E6E' })),
105
104
  React.createElement(ActionButton, { disabled: !canEdit, onClick: () => setDeleteDialog({ show: true, id: item._id }) },
106
- React.createElement(CloseIconDark, { className: 'remove-icon' }))))))),
105
+ React.createElement(DeleteSolidIcon, { className: 'remove-icon' }))))))),
107
106
  React.createElement(ReferencesModal, { isOpen: editingForm.show, onCancel: () => setEditingForm({ show: false }), items: items, citationCounts: citationCounts, item: editingForm.item, onSave: onSave, onDelete: onDelete }),
108
107
  React.createElement(Actions, null,
109
108
  React.createElement(IconTextButton, null),
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ export const DeleteSolidIcon = (props) => (React.createElement("svg", { className: props.className, width: "12", height: "14", viewBox: "0 0 12 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
3
+ React.createElement("path", { d: "M11.494 0.375H7.955C7.93 0.165 7.714 0 7.451 0H4.548C4.286 0 4.07 0.165 4.045 0.375H0.506C0.226 0.375 0 0.561 0 0.792V1.583C0 1.813 0.227 2 0.506 2H11.494C11.774 2 12 1.814 12 1.583V0.792C12 0.562 11.773 0.375 11.494 0.375ZM1 3V13.491C1 13.772 1.23 14 1.513 14H10.487C10.5541 14.0004 10.6207 13.9875 10.6829 13.9621C10.745 13.9367 10.8015 13.8993 10.8492 13.852C10.8969 13.8047 10.9347 13.7485 10.9606 13.6866C10.9865 13.6246 10.9999 13.5581 11 13.491V3H1ZM4.753 10.874C4.753 11.184 4.5 11.435 4.188 11.435C4.03886 11.4355 3.89559 11.3769 3.78966 11.2719C3.68373 11.1669 3.62379 11.0241 3.623 10.875V5.311C3.623 5.001 3.876 4.75 4.188 4.75C4.5 4.75 4.753 5 4.753 5.31V10.873V10.874ZM8.377 10.874C8.377 11.184 8.124 11.435 7.812 11.435C7.66286 11.4355 7.51959 11.3769 7.41366 11.2719C7.30773 11.1669 7.24779 11.0241 7.247 10.875V5.311C7.247 5.001 7.5 4.75 7.812 4.75C8.124 4.75 8.377 5 8.377 5.31V10.873V10.874Z", fill: "#6E6E6E" })));
@@ -46,3 +46,4 @@ export { default as BlockQuoteIcon } from './block-quote-icon';
46
46
  export { default as PullQuoteIcon } from './pull-quote-icon';
47
47
  export { default as PlusIcon } from './plus-icon';
48
48
  export { DeleteIcon } from './delete-icon';
49
+ export { DeleteSolidIcon } from './delete-solid-icon';
package/dist/es/index.js CHANGED
@@ -29,7 +29,6 @@ export * from './components/SaveStatus';
29
29
  export * from './components/StyledModal';
30
30
  export * from './components/TableFootnotesSelector';
31
31
  export * from './components/Sidebar';
32
- export * from './components/RichText';
33
32
  export * from './components/TextField';
34
33
  export * from './components/TextFieldContainer';
35
34
  export * from './components/TextFieldError';
@@ -0,0 +1,3 @@
1
+ import React from 'react';
2
+ import { IconProps } from './types';
3
+ export declare const DeleteSolidIcon: React.FC<IconProps>;
@@ -46,3 +46,4 @@ export { default as BlockQuoteIcon } from './block-quote-icon';
46
46
  export { default as PullQuoteIcon } from './pull-quote-icon';
47
47
  export { default as PlusIcon } from './plus-icon';
48
48
  export { DeleteIcon } from './delete-icon';
49
+ export { DeleteSolidIcon } from './delete-solid-icon';
@@ -30,7 +30,6 @@ export * from './components/SaveStatus';
30
30
  export * from './components/StyledModal';
31
31
  export * from './components/TableFootnotesSelector';
32
32
  export * from './components/Sidebar';
33
- export * from './components/RichText';
34
33
  export * from './components/TextField';
35
34
  export * from './components/TextFieldContainer';
36
35
  export * from './components/TextFieldError';
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@manuscripts/style-guide",
3
3
  "description": "Shared components for Manuscripts applications",
4
- "version": "1.12.1-LEAN-3571.0",
4
+ "version": "1.12.1",
5
5
  "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
6
6
  "license": "Apache-2.0",
7
7
  "main": "dist/cjs",
@@ -41,12 +41,6 @@
41
41
  "fuzzysort": "^2.0.4",
42
42
  "lodash": "^4.17.21",
43
43
  "react": "^17.0.2",
44
- "prosemirror-view": "1.33.6",
45
- "prosemirror-state": "1.4.3",
46
- "prosemirror-model": "1.19.4",
47
- "prosemirror-history": "1.4.0",
48
- "prosemirror-keymap": "1.2.2",
49
- "prosemirror-commands": "1.5.2",
50
44
  "react-dnd": "^16.0.1",
51
45
  "react-dnd-html5-backend": "^16.0.1",
52
46
  "react-dom": "^17.0.2",
@@ -1,46 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.RichText = void 0;
27
- const prosemirror_state_1 = require("prosemirror-state");
28
- const prosemirror_view_1 = require("prosemirror-view");
29
- const react_1 = __importStar(require("react"));
30
- const schema_1 = require("./schema");
31
- const RichText = ({ className, value }) => {
32
- const editorRef = (0, react_1.useRef)(null);
33
- (0, react_1.useEffect)(() => {
34
- const state = prosemirror_state_1.EditorState.create({
35
- doc: (0, schema_1.parseRichText)(value),
36
- schema: schema_1.schema,
37
- });
38
- const view = new prosemirror_view_1.EditorView(null, {
39
- editable: () => false,
40
- state,
41
- });
42
- editorRef.current && editorRef.current.replaceChildren(view.dom);
43
- }, [value]);
44
- return react_1.default.createElement("div", { className: className, ref: editorRef });
45
- };
46
- exports.RichText = RichText;
@@ -1,90 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- var __importDefault = (this && this.__importDefault) || function (mod) {
26
- return (mod && mod.__esModule) ? mod : { "default": mod };
27
- };
28
- Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.RichTextField = void 0;
30
- const prosemirror_commands_1 = require("prosemirror-commands");
31
- const prosemirror_history_1 = require("prosemirror-history");
32
- const prosemirror_keymap_1 = require("prosemirror-keymap");
33
- const prosemirror_state_1 = require("prosemirror-state");
34
- const prosemirror_view_1 = require("prosemirror-view");
35
- const react_1 = __importStar(require("react"));
36
- const styled_components_1 = __importDefault(require("styled-components"));
37
- const schema_1 = require("./schema");
38
- const Container = styled_components_1.default.div `
39
- & .ProseMirror {
40
- font-family: ${(props) => props.theme.font.family.sans};
41
- font-size: ${(props) => props.theme.font.size.medium};
42
- line-height: 1.25;
43
- color: ${(props) => props.theme.colors.text.primary};
44
- border-radius: ${(props) => props.theme.grid.radius.small};
45
- border: 1px solid ${(props) => props.theme.colors.text.muted};
46
- padding: ${(props) => props.theme.grid.unit * 2}px
47
- ${(props) => props.theme.grid.unit * 3}px;
48
-
49
- &:focus {
50
- outline: none;
51
- border-color: ${(props) => props.theme.colors.border.field.hover};
52
- background-color: ${(props) => props.theme.colors.background.fifth};
53
- }
54
- }
55
- `;
56
- const RichTextField = ({ value, onChange, }) => {
57
- const editorRef = (0, react_1.useRef)(null);
58
- (0, react_1.useEffect)(() => {
59
- const dispatch = (view, tr) => {
60
- const { state, transactions } = view.state.applyTransaction(tr);
61
- view.updateState(state);
62
- if (onChange && transactions.some((tr) => tr.docChanged)) {
63
- const value = (0, schema_1.serializeRichText)(state.doc);
64
- onChange(value);
65
- }
66
- };
67
- const state = prosemirror_state_1.EditorState.create({
68
- doc: (0, schema_1.parseRichText)(value),
69
- plugins: [
70
- (0, prosemirror_history_1.history)(),
71
- (0, prosemirror_keymap_1.keymap)(prosemirror_commands_1.baseKeymap),
72
- (0, prosemirror_keymap_1.keymap)({
73
- 'Mod-b': (0, prosemirror_commands_1.toggleMark)(schema_1.schema.marks.bold),
74
- 'Mod-i': (0, prosemirror_commands_1.toggleMark)(schema_1.schema.marks.italic),
75
- 'Mod-y': prosemirror_history_1.redo,
76
- 'Mod-z': prosemirror_history_1.undo,
77
- }),
78
- ],
79
- schema: schema_1.schema,
80
- });
81
- const view = new prosemirror_view_1.EditorView(null, {
82
- editable: () => true,
83
- state,
84
- dispatchTransaction: (tr) => dispatch(view, tr),
85
- });
86
- editorRef.current && editorRef.current.appendChild(view.dom);
87
- }, [value, onChange]);
88
- return react_1.default.createElement(Container, { ref: editorRef });
89
- };
90
- exports.RichTextField = RichTextField;
@@ -1,7 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.RichTextField = exports.RichText = void 0;
4
- var RichText_1 = require("./RichText");
5
- Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
6
- var RichTextField_1 = require("./RichTextField");
7
- Object.defineProperty(exports, "RichTextField", { enumerable: true, get: function () { return RichTextField_1.RichTextField; } });
@@ -1,111 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.serializeRichText = exports.parseRichText = exports.schema = void 0;
4
- const prosemirror_model_1 = require("prosemirror-model");
5
- exports.schema = new prosemirror_model_1.Schema({
6
- marks: {
7
- bold: {
8
- parseDOM: [
9
- {
10
- tag: 'b',
11
- getAttrs: (dom) => dom.style.fontWeight !== 'normal' && null,
12
- },
13
- {
14
- tag: 'strong',
15
- },
16
- {
17
- style: 'font-weight',
18
- getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
19
- },
20
- ],
21
- toDOM() {
22
- return ['b'];
23
- },
24
- },
25
- italic: {
26
- parseDOM: [
27
- {
28
- tag: 'i',
29
- },
30
- {
31
- tag: 'em',
32
- },
33
- {
34
- style: 'font-style=italic',
35
- },
36
- ],
37
- toDOM() {
38
- return ['i'];
39
- },
40
- },
41
- smallcaps: {
42
- parseDOM: [
43
- {
44
- style: 'font-variant=small-caps',
45
- },
46
- {
47
- style: 'font-variant-caps=small-caps',
48
- },
49
- ],
50
- toDOM: () => [
51
- 'span',
52
- {
53
- style: 'font-variant:small-caps',
54
- },
55
- ],
56
- },
57
- subscript: {
58
- excludes: 'superscript',
59
- group: 'position',
60
- parseDOM: [
61
- {
62
- tag: 'sub',
63
- },
64
- {
65
- style: 'vertical-align=sub',
66
- },
67
- ],
68
- toDOM: () => ['sub'],
69
- },
70
- superscript: {
71
- excludes: 'subscript',
72
- group: 'position',
73
- parseDOM: [
74
- {
75
- tag: 'sup',
76
- },
77
- {
78
- style: 'vertical-align=super',
79
- },
80
- ],
81
- toDOM: () => ['sup'],
82
- },
83
- },
84
- nodes: {
85
- text: {},
86
- rich: {
87
- content: 'text*',
88
- marks: 'bold italic smallcaps subscript superscript',
89
- parseDOM: [
90
- {
91
- tag: 'div',
92
- },
93
- ],
94
- toDOM: () => ['div', 0],
95
- },
96
- },
97
- topNode: 'rich',
98
- });
99
- const parser = prosemirror_model_1.DOMParser.fromSchema(exports.schema);
100
- const serializer = prosemirror_model_1.DOMSerializer.fromSchema(exports.schema);
101
- const parseRichText = (value) => {
102
- const node = document.createElement('div');
103
- node.innerHTML = value;
104
- return parser.parse(node);
105
- };
106
- exports.parseRichText = parseRichText;
107
- const serializeRichText = (node) => {
108
- const element = serializer.serializeNode(node);
109
- return element.innerHTML;
110
- };
111
- exports.serializeRichText = serializeRichText;
@@ -1,19 +0,0 @@
1
- import { EditorState } from 'prosemirror-state';
2
- import { EditorView } from 'prosemirror-view';
3
- import React, { useEffect, useRef } from 'react';
4
- import { parseRichText, schema } from './schema';
5
- export const RichText = ({ className, value }) => {
6
- const editorRef = useRef(null);
7
- useEffect(() => {
8
- const state = EditorState.create({
9
- doc: parseRichText(value),
10
- schema,
11
- });
12
- const view = new EditorView(null, {
13
- editable: () => false,
14
- state,
15
- });
16
- editorRef.current && editorRef.current.replaceChildren(view.dom);
17
- }, [value]);
18
- return React.createElement("div", { className: className, ref: editorRef });
19
- };
@@ -1,60 +0,0 @@
1
- import { baseKeymap, toggleMark } from 'prosemirror-commands';
2
- import { history, redo, undo } from 'prosemirror-history';
3
- import { keymap } from 'prosemirror-keymap';
4
- import { EditorState } from 'prosemirror-state';
5
- import { EditorView } from 'prosemirror-view';
6
- import React, { useEffect, useRef } from 'react';
7
- import styled from 'styled-components';
8
- import { parseRichText, schema, serializeRichText } from './schema';
9
- const Container = styled.div `
10
- & .ProseMirror {
11
- font-family: ${(props) => props.theme.font.family.sans};
12
- font-size: ${(props) => props.theme.font.size.medium};
13
- line-height: 1.25;
14
- color: ${(props) => props.theme.colors.text.primary};
15
- border-radius: ${(props) => props.theme.grid.radius.small};
16
- border: 1px solid ${(props) => props.theme.colors.text.muted};
17
- padding: ${(props) => props.theme.grid.unit * 2}px
18
- ${(props) => props.theme.grid.unit * 3}px;
19
-
20
- &:focus {
21
- outline: none;
22
- border-color: ${(props) => props.theme.colors.border.field.hover};
23
- background-color: ${(props) => props.theme.colors.background.fifth};
24
- }
25
- }
26
- `;
27
- export const RichTextField = ({ value, onChange, }) => {
28
- const editorRef = useRef(null);
29
- useEffect(() => {
30
- const dispatch = (view, tr) => {
31
- const { state, transactions } = view.state.applyTransaction(tr);
32
- view.updateState(state);
33
- if (onChange && transactions.some((tr) => tr.docChanged)) {
34
- const value = serializeRichText(state.doc);
35
- onChange(value);
36
- }
37
- };
38
- const state = EditorState.create({
39
- doc: parseRichText(value),
40
- plugins: [
41
- history(),
42
- keymap(baseKeymap),
43
- keymap({
44
- 'Mod-b': toggleMark(schema.marks.bold),
45
- 'Mod-i': toggleMark(schema.marks.italic),
46
- 'Mod-y': redo,
47
- 'Mod-z': undo,
48
- }),
49
- ],
50
- schema,
51
- });
52
- const view = new EditorView(null, {
53
- editable: () => true,
54
- state,
55
- dispatchTransaction: (tr) => dispatch(view, tr),
56
- });
57
- editorRef.current && editorRef.current.appendChild(view.dom);
58
- }, [value, onChange]);
59
- return React.createElement(Container, { ref: editorRef });
60
- };
@@ -1,2 +0,0 @@
1
- export { RichText } from './RichText';
2
- export { RichTextField } from './RichTextField';
@@ -1,106 +0,0 @@
1
- import { DOMParser, DOMSerializer, Schema, } from 'prosemirror-model';
2
- export const schema = new Schema({
3
- marks: {
4
- bold: {
5
- parseDOM: [
6
- {
7
- tag: 'b',
8
- getAttrs: (dom) => dom.style.fontWeight !== 'normal' && null,
9
- },
10
- {
11
- tag: 'strong',
12
- },
13
- {
14
- style: 'font-weight',
15
- getAttrs: (value) => /^(bold(er)?|[5-9]\d{2,})$/.test(value) && null,
16
- },
17
- ],
18
- toDOM() {
19
- return ['b'];
20
- },
21
- },
22
- italic: {
23
- parseDOM: [
24
- {
25
- tag: 'i',
26
- },
27
- {
28
- tag: 'em',
29
- },
30
- {
31
- style: 'font-style=italic',
32
- },
33
- ],
34
- toDOM() {
35
- return ['i'];
36
- },
37
- },
38
- smallcaps: {
39
- parseDOM: [
40
- {
41
- style: 'font-variant=small-caps',
42
- },
43
- {
44
- style: 'font-variant-caps=small-caps',
45
- },
46
- ],
47
- toDOM: () => [
48
- 'span',
49
- {
50
- style: 'font-variant:small-caps',
51
- },
52
- ],
53
- },
54
- subscript: {
55
- excludes: 'superscript',
56
- group: 'position',
57
- parseDOM: [
58
- {
59
- tag: 'sub',
60
- },
61
- {
62
- style: 'vertical-align=sub',
63
- },
64
- ],
65
- toDOM: () => ['sub'],
66
- },
67
- superscript: {
68
- excludes: 'subscript',
69
- group: 'position',
70
- parseDOM: [
71
- {
72
- tag: 'sup',
73
- },
74
- {
75
- style: 'vertical-align=super',
76
- },
77
- ],
78
- toDOM: () => ['sup'],
79
- },
80
- },
81
- nodes: {
82
- text: {},
83
- rich: {
84
- content: 'text*',
85
- marks: 'bold italic smallcaps subscript superscript',
86
- parseDOM: [
87
- {
88
- tag: 'div',
89
- },
90
- ],
91
- toDOM: () => ['div', 0],
92
- },
93
- },
94
- topNode: 'rich',
95
- });
96
- const parser = DOMParser.fromSchema(schema);
97
- const serializer = DOMSerializer.fromSchema(schema);
98
- export const parseRichText = (value) => {
99
- const node = document.createElement('div');
100
- node.innerHTML = value;
101
- return parser.parse(node);
102
- };
103
- export const serializeRichText = (node) => {
104
- const element = serializer.serializeNode(node);
105
- return element.innerHTML;
106
- };
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- export interface RichTextProps {
3
- className?: string;
4
- value: string;
5
- }
6
- export declare const RichText: React.FC<RichTextProps>;
@@ -1,6 +0,0 @@
1
- import React from 'react';
2
- export interface RichTextFieldProps {
3
- value: string;
4
- onChange?: (value: string) => void;
5
- }
6
- export declare const RichTextField: React.FC<RichTextFieldProps>;
@@ -1,2 +0,0 @@
1
- export { RichText } from './RichText';
2
- export { RichTextField } from './RichTextField';
@@ -1,7 +0,0 @@
1
- import { Node as ProsemirrorNode, Schema } from 'prosemirror-model';
2
- export type Nodes = 'text' | 'rich';
3
- export type Marks = 'bold' | 'italic' | 'smallcaps' | 'subscript' | 'superscript';
4
- export type RichTextSchema = Schema<Nodes, Marks>;
5
- export declare const schema: RichTextSchema;
6
- export declare const parseRichText: (value: string) => ProsemirrorNode;
7
- export declare const serializeRichText: (node: ProsemirrorNode) => string;