@squiz/formatted-text-editor 1.12.0-alpha.40 → 1.12.0-alpha.8
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.
- package/README.md +3 -2
- package/lib/Editor/Editor.js +9 -3
- package/lib/EditorToolbar/EditorToolbar.js +3 -10
- package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js +1 -4
- package/lib/index.css +93 -803
- package/package.json +8 -12
- package/.eslintrc.json +0 -34
- package/CHANGELOG.md +0 -48
- package/build.js +0 -21
- package/cypress/e2e/bold.spec.cy.ts +0 -18
- package/cypress/global.d.ts +0 -9
- package/cypress/support/commands.ts +0 -130
- package/cypress/support/e2e.ts +0 -20
- package/cypress/tsconfig.json +0 -8
- package/cypress.config.ts +0 -7
- package/demo/App.tsx +0 -12
- package/demo/index.html +0 -13
- package/demo/index.scss +0 -1
- package/demo/main.tsx +0 -10
- package/demo/public/favicon-dxp.svg +0 -3
- package/demo/vite-env.d.ts +0 -1
- package/file-transformer.js +0 -1
- package/jest.config.ts +0 -27
- package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts +0 -2
- package/lib/EditorToolbar/Tools/Redo/RedoButton.js +0 -16
- package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts +0 -5
- package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js +0 -32
- package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts +0 -2
- package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js +0 -17
- package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts +0 -2
- package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js +0 -16
- package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts +0 -2
- package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js +0 -35
- package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts +0 -2
- package/lib/EditorToolbar/Tools/Undo/UndoButton.js +0 -16
- package/lib/Extensions/Extensions.d.ts +0 -3
- package/lib/Extensions/Extensions.js +0 -13
- package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts +0 -10
- package/lib/Extensions/PreformattedExtension/PreformattedExtension.js +0 -46
- package/lib/ui/DropdownButton/DropdownButton.d.ts +0 -9
- package/lib/ui/DropdownButton/DropdownButton.js +0 -8
- package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts +0 -7
- package/lib/ui/ToolbarDropdown/ToolbarDropdown.js +0 -12
- package/postcss.config.js +0 -3
- package/src/Editor/Editor.mock.tsx +0 -40
- package/src/Editor/Editor.spec.tsx +0 -254
- package/src/Editor/Editor.tsx +0 -32
- package/src/Editor/_editor.scss +0 -75
- package/src/EditorToolbar/EditorToolbar.tsx +0 -51
- package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx +0 -19
- package/src/EditorToolbar/Tools/Bold/BoldButton.tsx +0 -30
- package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx +0 -19
- package/src/EditorToolbar/Tools/Italic/ItalicButton.tsx +0 -30
- package/src/EditorToolbar/Tools/Redo/RedoButton.spec.tsx +0 -59
- package/src/EditorToolbar/Tools/Redo/RedoButton.tsx +0 -30
- package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx +0 -31
- package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx +0 -31
- package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx +0 -31
- package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx +0 -31
- package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx +0 -21
- package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx +0 -52
- package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx +0 -26
- package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx +0 -30
- package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx +0 -44
- package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx +0 -19
- package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx +0 -30
- package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx +0 -49
- package/src/EditorToolbar/Tools/Undo/UndoButton.tsx +0 -30
- package/src/EditorToolbar/_editor-toolbar.scss +0 -19
- package/src/Extensions/Extensions.tsx +0 -24
- package/src/Extensions/PreformattedExtension/PreformattedExtension.tsx +0 -50
- package/src/FormattedTextEditor.spec.tsx +0 -10
- package/src/FormattedTextEditor.tsx +0 -12
- package/src/index.scss +0 -15
- package/src/index.ts +0 -3
- package/src/ui/DropdownButton/DropdownButton.tsx +0 -28
- package/src/ui/DropdownButton/_dropdown-button.scss +0 -7
- package/src/ui/ToolbarButton/ToolbarButton.tsx +0 -26
- package/src/ui/ToolbarButton/_toolbar-button.scss +0 -37
- package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx +0 -32
- package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss +0 -27
- package/tailwind.config.cjs +0 -62
- package/tsconfig.json +0 -22
- package/vite.config.ts +0 -19
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@squiz/formatted-text-editor",
|
3
|
-
"version": "1.12.0-alpha.
|
3
|
+
"version": "1.12.0-alpha.8",
|
4
4
|
"main": "lib/index.js",
|
5
5
|
"types": "lib/index.d.ts",
|
6
6
|
"scripts": {
|
@@ -15,10 +15,12 @@
|
|
15
15
|
"test:watch": "jest --watch",
|
16
16
|
"test:e2e": "vite build && vite preview --port 8080 & cypress open"
|
17
17
|
},
|
18
|
+
"files": [
|
19
|
+
"lib/**"
|
20
|
+
],
|
18
21
|
"dependencies": {
|
19
22
|
"@mui/icons-material": "5.11.0",
|
20
|
-
"@remirror/react": "2.0.25"
|
21
|
-
"flowbite": "^1.6.3"
|
23
|
+
"@remirror/react": "2.0.25"
|
22
24
|
},
|
23
25
|
"devDependencies": {
|
24
26
|
"@testing-library/cypress": "9.0.0",
|
@@ -27,20 +29,15 @@
|
|
27
29
|
"@types/react": "18.0.26",
|
28
30
|
"@types/react-dom": "18.0.9",
|
29
31
|
"@vitejs/plugin-react": "3.0.0",
|
30
|
-
"autoprefixer": "10.4.13",
|
31
32
|
"cypress": "12.5.1",
|
33
|
+
"eslint-config-prettier": "8.6.0",
|
32
34
|
"eslint-plugin-cypress": "2.12.1",
|
33
35
|
"eslint-plugin-jsx-a11y": "6.7.1",
|
34
36
|
"eslint-plugin-react": "7.32.2",
|
35
|
-
"jest": "29.4.1",
|
36
37
|
"jest-environment-jsdom": "29.4.1",
|
37
|
-
"postcss": "8.4.21",
|
38
|
-
"postcss-nested": "6.0.0",
|
39
38
|
"react": "18.2.0",
|
40
39
|
"react-dom": "18.2.0",
|
41
40
|
"rimraf": "4.1.2",
|
42
|
-
"tailwindcss": "3.2.6",
|
43
|
-
"ts-jest": "29.0.5",
|
44
41
|
"typescript": "4.9.3",
|
45
42
|
"vite": "4.0.0"
|
46
43
|
},
|
@@ -60,6 +57,5 @@
|
|
60
57
|
},
|
61
58
|
"volta": {
|
62
59
|
"node": "16.19.0"
|
63
|
-
}
|
64
|
-
|
65
|
-
}
|
60
|
+
}
|
61
|
+
}
|
package/.eslintrc.json
DELETED
@@ -1,34 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"env": {
|
3
|
-
"jest/globals": true,
|
4
|
-
"cypress/globals": true
|
5
|
-
},
|
6
|
-
"plugins": ["cypress"],
|
7
|
-
"extends": [
|
8
|
-
"plugin:react/recommended",
|
9
|
-
"plugin:jsx-a11y/recommended",
|
10
|
-
"plugin:cypress/recommended",
|
11
|
-
"plugin:jest/style",
|
12
|
-
"plugin:jest/recommended"
|
13
|
-
],
|
14
|
-
"overrides": [
|
15
|
-
{
|
16
|
-
// Cypress use different assertion methods. Don't validate that tests have assertions.
|
17
|
-
"files": ["**/*.spec.cy.ts"],
|
18
|
-
"rules": { "jest/expect-expect": "off" }
|
19
|
-
}
|
20
|
-
],
|
21
|
-
"settings": {
|
22
|
-
"react": {
|
23
|
-
// Tells eslint-plugin-react to automatically detect the version of React to use.
|
24
|
-
"version": "detect"
|
25
|
-
},
|
26
|
-
// Tells eslint how to resolve imports
|
27
|
-
"import/resolver": {
|
28
|
-
"node": {
|
29
|
-
"paths": ["src"],
|
30
|
-
"extensions": [".js", ".jsx", ".ts", ".tsx"]
|
31
|
-
}
|
32
|
-
}
|
33
|
-
}
|
34
|
-
}
|
package/CHANGELOG.md
DELETED
@@ -1,48 +0,0 @@
|
|
1
|
-
# Change Log
|
2
|
-
|
3
|
-
All notable changes to this project will be documented in this file.
|
4
|
-
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
|
-
|
6
|
-
## [1.6.1-alpha.5](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.1-alpha.3...v1.6.1-alpha.5) (2023-02-02)
|
7
|
-
|
8
|
-
**Note:** Version bump only for package @squiz/formatted-text-editor
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
## [1.6.1-alpha.4](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.1-alpha.3...v1.6.1-alpha.4) (2023-02-02)
|
15
|
-
|
16
|
-
**Note:** Version bump only for package @squiz/formatted-text-editor
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
## [1.6.1-alpha.3](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.1-alpha.2...v1.6.1-alpha.3) (2023-02-02)
|
23
|
-
|
24
|
-
**Note:** Version bump only for package @squiz/formatted-text-editor
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
## [1.6.1-alpha.2](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.0...v1.6.1-alpha.2) (2023-02-02)
|
31
|
-
|
32
|
-
**Note:** Version bump only for package @squiz/formatted-text-editor
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
## [1.6.1-alpha.1](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.0...v1.6.1-alpha.1) (2023-02-02)
|
39
|
-
|
40
|
-
**Note:** Version bump only for package @squiz/formatted-text-editor
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
## [1.6.1-alpha.0](https://gitlab.squiz.net/developer-experience/cmp/compare/v1.6.0...v1.6.1-alpha.0) (2023-02-02)
|
47
|
-
|
48
|
-
**Note:** Version bump only for package @squiz/formatted-text-editor
|
package/build.js
DELETED
@@ -1,21 +0,0 @@
|
|
1
|
-
const esbuild = require('esbuild');
|
2
|
-
const { sassPlugin } = require('esbuild-sass-plugin');
|
3
|
-
const postcss = require('postcss');
|
4
|
-
const tailwindcss = require('tailwindcss');
|
5
|
-
|
6
|
-
esbuild
|
7
|
-
.build({
|
8
|
-
entryPoints: ['src/index.scss'],
|
9
|
-
bundle: true,
|
10
|
-
outdir: 'lib',
|
11
|
-
plugins: [
|
12
|
-
sassPlugin({
|
13
|
-
type: 'css',
|
14
|
-
transform: async (source) => {
|
15
|
-
const { css } = postcss(tailwindcss).process(source);
|
16
|
-
return css;
|
17
|
-
},
|
18
|
-
}),
|
19
|
-
],
|
20
|
-
})
|
21
|
-
.catch(() => process.exit(1));
|
@@ -1,18 +0,0 @@
|
|
1
|
-
describe('The formatted text editor renders', () => {
|
2
|
-
it('Should toggle bold on highlighted text', () => {
|
3
|
-
cy.visit('/');
|
4
|
-
|
5
|
-
cy.get('.ProseMirror.remirror-editor')
|
6
|
-
.clear()
|
7
|
-
.type('It was the best of times it was the worst of times.')
|
8
|
-
.setSelection('best of times');
|
9
|
-
|
10
|
-
cy.findAllByRole('button', { name: 'Bold (cmd+B)' }).first().click();
|
11
|
-
|
12
|
-
cy.get('strong').should('include.text', 'best of times');
|
13
|
-
|
14
|
-
cy.findAllByRole('button', { name: 'Bold (cmd+B)' }).first().click();
|
15
|
-
|
16
|
-
cy.get('strong').should('not.exist');
|
17
|
-
});
|
18
|
-
});
|
package/cypress/global.d.ts
DELETED
@@ -1,130 +0,0 @@
|
|
1
|
-
// eslint-disable-next-line @typescript-eslint/triple-slash-reference
|
2
|
-
/// <reference path="../global.d.ts" />
|
3
|
-
|
4
|
-
import '@testing-library/cypress/add-commands';
|
5
|
-
|
6
|
-
// ***********************************************
|
7
|
-
// This example commands.ts shows you how to
|
8
|
-
// create various custom commands and overwrite
|
9
|
-
// existing commands.
|
10
|
-
//
|
11
|
-
// For more comprehensive examples of custom
|
12
|
-
// commands please read more here:
|
13
|
-
// https://on.cypress.io/custom-commands
|
14
|
-
// ***********************************************
|
15
|
-
//
|
16
|
-
//
|
17
|
-
// -- This is a parent command --
|
18
|
-
// Cypress.Commands.add('login', (email, password) => { ... })
|
19
|
-
//
|
20
|
-
//
|
21
|
-
// -- This is a child command --
|
22
|
-
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
23
|
-
//
|
24
|
-
//
|
25
|
-
// -- This is a dual command --
|
26
|
-
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
27
|
-
//
|
28
|
-
//
|
29
|
-
// -- This will overwrite an existing command --
|
30
|
-
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
31
|
-
//
|
32
|
-
// declare global {
|
33
|
-
// namespace Cypress {
|
34
|
-
// interface Chainable {
|
35
|
-
// login(email: string, password: string): Chainable<void>
|
36
|
-
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
37
|
-
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
38
|
-
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
|
39
|
-
// }
|
40
|
-
// }
|
41
|
-
// }
|
42
|
-
|
43
|
-
/**
|
44
|
-
* Credits
|
45
|
-
* @Bkucera: https://github.com/cypress-io/cypress/issues/2839#issuecomment-447012818
|
46
|
-
* @Phrogz: https://stackoverflow.com/a/10730777/1556245
|
47
|
-
*
|
48
|
-
* Usage
|
49
|
-
* ```
|
50
|
-
* // Types "foo" and then selects "fo"
|
51
|
-
* cy.get('input')
|
52
|
-
* .type('foo')
|
53
|
-
* .setSelection('fo')
|
54
|
-
*
|
55
|
-
* // Types "foo", "bar", "baz", and "qux" on separate lines, then selects "foo", "bar", and "baz"
|
56
|
-
* cy.get('textarea')
|
57
|
-
* .type('foo{enter}bar{enter}baz{enter}qux{enter}')
|
58
|
-
* .setSelection('foo', 'baz')
|
59
|
-
*
|
60
|
-
* // Types "foo" and then sets the cursor before the last letter
|
61
|
-
* cy.get('input')
|
62
|
-
* .type('foo')
|
63
|
-
* .setCursorAfter('fo')
|
64
|
-
*
|
65
|
-
* // Types "foo" and then sets the cursor at the beginning of the word
|
66
|
-
* cy.get('input')
|
67
|
-
* .type('foo')
|
68
|
-
* .setCursorBefore('foo')
|
69
|
-
*
|
70
|
-
* // `setSelection` can alternatively target starting and ending nodes using query strings,
|
71
|
-
* // plus specific offsets. The queries are processed via `Element.querySelector`.
|
72
|
-
* cy.get('body')
|
73
|
-
* .setSelection({
|
74
|
-
* anchorQuery: 'ul > li > p', // required
|
75
|
-
* anchorOffset: 2 // default: 0
|
76
|
-
* focusQuery: 'ul > li > p:last-child', // default: anchorQuery
|
77
|
-
* focusOffset: 0 // default: 0
|
78
|
-
* })
|
79
|
-
*/
|
80
|
-
|
81
|
-
// Low level command reused by `setSelection` and low level command `setCursor`
|
82
|
-
Cypress.Commands.add('selection', { prevSubject: true }, (subject, fn) => {
|
83
|
-
cy.wrap(subject).trigger('mousedown').then(fn).trigger('mouseup');
|
84
|
-
|
85
|
-
cy.document().trigger('selectionchange');
|
86
|
-
return cy.wrap(subject);
|
87
|
-
});
|
88
|
-
|
89
|
-
Cypress.Commands.add('setSelection', { prevSubject: true }, (subject, query, endQuery) => {
|
90
|
-
return cy.wrap(subject).selection(($el: any[]) => {
|
91
|
-
if (typeof query === 'string') {
|
92
|
-
const anchorNode = getTextNode($el[0], query);
|
93
|
-
const focusNode = endQuery ? getTextNode($el[0], endQuery) : anchorNode;
|
94
|
-
const anchorOffset = anchorNode.wholeText.indexOf(query);
|
95
|
-
const focusOffset = endQuery
|
96
|
-
? focusNode.wholeText.indexOf(endQuery) + endQuery.length
|
97
|
-
: anchorOffset + query.length;
|
98
|
-
setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
|
99
|
-
} else if (typeof query === 'object') {
|
100
|
-
const el = $el[0];
|
101
|
-
const anchorNode = getTextNode(el.querySelector(query.anchorQuery));
|
102
|
-
const anchorOffset = query.anchorOffset || 0;
|
103
|
-
const focusNode = query.focusQuery ? getTextNode(el.querySelector(query.focusQuery)) : anchorNode;
|
104
|
-
const focusOffset = query.focusOffset || 0;
|
105
|
-
setBaseAndExtent(anchorNode, anchorOffset, focusNode, focusOffset);
|
106
|
-
}
|
107
|
-
});
|
108
|
-
});
|
109
|
-
|
110
|
-
// Helper functions
|
111
|
-
function getTextNode(el: HTMLElement, match?: any) {
|
112
|
-
const walk = document.createTreeWalker(el, NodeFilter.SHOW_TEXT, null);
|
113
|
-
if (!match) {
|
114
|
-
return walk.nextNode();
|
115
|
-
}
|
116
|
-
|
117
|
-
// const nodes = [];
|
118
|
-
let node;
|
119
|
-
while ((node = walk.nextNode())) {
|
120
|
-
if (node.wholeText.includes(match)) {
|
121
|
-
return node;
|
122
|
-
}
|
123
|
-
}
|
124
|
-
}
|
125
|
-
|
126
|
-
function setBaseAndExtent(...args) {
|
127
|
-
const document = args[0].ownerDocument;
|
128
|
-
document.getSelection().removeAllRanges();
|
129
|
-
document.getSelection().setBaseAndExtent(...args);
|
130
|
-
}
|
package/cypress/support/e2e.ts
DELETED
@@ -1,20 +0,0 @@
|
|
1
|
-
// ***********************************************************
|
2
|
-
// This example support/e2e.ts is processed and
|
3
|
-
// loaded automatically before your test files.
|
4
|
-
//
|
5
|
-
// This is a great place to put global configuration and
|
6
|
-
// behavior that modifies Cypress.
|
7
|
-
//
|
8
|
-
// You can change the location of this file or turn off
|
9
|
-
// automatically serving support files with the
|
10
|
-
// 'supportFile' configuration option.
|
11
|
-
//
|
12
|
-
// You can read more here:
|
13
|
-
// https://on.cypress.io/configuration
|
14
|
-
// ***********************************************************
|
15
|
-
|
16
|
-
// Import commands.js using ES2015 syntax:
|
17
|
-
import './commands';
|
18
|
-
|
19
|
-
// Alternatively you can use CommonJS syntax:
|
20
|
-
// require('./commands')
|
package/cypress/tsconfig.json
DELETED
package/cypress.config.ts
DELETED
package/demo/App.tsx
DELETED
package/demo/index.html
DELETED
@@ -1,13 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en">
|
3
|
-
<head>
|
4
|
-
<meta charset="UTF-8" />
|
5
|
-
<link rel="icon" type="image/svg+xml" href="/favicon-dxp.svg" />
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
7
|
-
<title>Formatted text editor - DXP package (SQUIZ)</title>
|
8
|
-
</head>
|
9
|
-
<body>
|
10
|
-
<div id="root"></div>
|
11
|
-
<script type="module" src="./main.tsx"></script>
|
12
|
-
</body>
|
13
|
-
</html>
|
package/demo/index.scss
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
@import '../src/index.scss';
|
package/demo/main.tsx
DELETED
@@ -1,10 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import ReactDOM from 'react-dom/client';
|
3
|
-
import App from './App';
|
4
|
-
import './index.scss';
|
5
|
-
|
6
|
-
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
|
7
|
-
<React.StrictMode>
|
8
|
-
<App />
|
9
|
-
</React.StrictMode>,
|
10
|
-
);
|
@@ -1,3 +0,0 @@
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
|
2
|
-
<path fill="#1D9BE2" fill-rule="evenodd" d="M4 0a4 4 0 0 0-4 4v8a4 4 0 0 0 4 4h8a4 4 0 0 0 4-4V4a4 4 0 0 0-4-4H4Zm-.883 5.766a4.01 4.01 0 0 0 1.66.909l5.334 1.49c.634.177 1.069-.628.574-1.062L5.532 2.59c-.829-.745-2.255-.827-3.001 0-1.078 1.342-.326 2.328.586 3.176Zm10.137-3.195c.848.761 1.05 2.188.203 2.95l-1.183.92a.903.903 0 0 1-1.134-.02l-1.091-.913a1.846 1.846 0 0 1 .137-2.937c.848-.761 2.221-.761 3.068 0Zm-2.03 6.754a4.01 4.01 0 0 1 1.66.909c.911.848 1.663 1.834.585 3.176-.746.827-2.172.745-3 0L5.314 8.897c-.495-.434-.06-1.239.574-1.061l5.334 1.49ZM2.745 13.43c-.848-.761-1.05-2.188-.203-2.95l1.183-.92a.903.903 0 0 1 1.134.02l1.091.913a1.846 1.846 0 0 1-.137 2.937c-.847.761-2.221.761-3.068 0Z" clip-rule="evenodd"/>
|
3
|
-
</svg>
|
package/demo/vite-env.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
/// <reference types="vite/client" />
|
package/file-transformer.js
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
module.exports = {};
|
package/jest.config.ts
DELETED
@@ -1,27 +0,0 @@
|
|
1
|
-
export default {
|
2
|
-
preset: 'ts-jest',
|
3
|
-
maxWorkers: 1,
|
4
|
-
clearMocks: true,
|
5
|
-
collectCoverage: true,
|
6
|
-
collectCoverageFrom: ['src/**/*.{ts,tsx}'],
|
7
|
-
errorOnDeprecated: true,
|
8
|
-
fakeTimers: {
|
9
|
-
enableGlobally: true,
|
10
|
-
},
|
11
|
-
resetMocks: true,
|
12
|
-
resetModules: true,
|
13
|
-
testEnvironment: 'jsdom',
|
14
|
-
moduleNameMapper: {
|
15
|
-
'\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|scss)$':
|
16
|
-
'<rootDir>/file-transformer.js',
|
17
|
-
},
|
18
|
-
// TODO: enable once directory structure is sorted and we have tests/more complete code being written.
|
19
|
-
// coverageThreshold: {
|
20
|
-
// global: {
|
21
|
-
// branches: 90,
|
22
|
-
// functions: 90,
|
23
|
-
// lines: 90,
|
24
|
-
// statements: 90,
|
25
|
-
// },
|
26
|
-
// },
|
27
|
-
};
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { useCommands, useHelpers } from '@remirror/react';
|
3
|
-
import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
|
4
|
-
import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
|
5
|
-
const RedoButton = () => {
|
6
|
-
const { redo } = useCommands();
|
7
|
-
const { redoDepth } = useHelpers(true);
|
8
|
-
const handleSelect = () => {
|
9
|
-
if (redo.enabled()) {
|
10
|
-
redo();
|
11
|
-
}
|
12
|
-
};
|
13
|
-
const enabled = redoDepth() > 0;
|
14
|
-
return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: React.createElement(RedoRoundedIcon, null), label: "Redo (shift+cmd+Z)" }));
|
15
|
-
};
|
16
|
-
export default RedoButton;
|
@@ -1,32 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { useCommands, useChainedCommands, useActive } from '@remirror/react';
|
3
|
-
import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
|
4
|
-
const HeadingButton = ({ level }) => {
|
5
|
-
const { toggleHeading } = useCommands();
|
6
|
-
const chain = useChainedCommands();
|
7
|
-
const active = useActive();
|
8
|
-
const enabled = toggleHeading.enabled({ level });
|
9
|
-
const handleSelect = () => {
|
10
|
-
if (toggleHeading.enabled({ level })) {
|
11
|
-
chain.toggleHeading({ level }).focus().run();
|
12
|
-
}
|
13
|
-
};
|
14
|
-
const headingContent = () => {
|
15
|
-
switch (level) {
|
16
|
-
case 1:
|
17
|
-
return React.createElement("h1", null, "Heading 1");
|
18
|
-
case 2:
|
19
|
-
return React.createElement("h2", null, "Heading 2");
|
20
|
-
case 3:
|
21
|
-
return React.createElement("h3", null, "Heading 3");
|
22
|
-
case 4:
|
23
|
-
return React.createElement("h4", null, "Heading 4");
|
24
|
-
case 5:
|
25
|
-
return React.createElement("h5", null, "Heading 5");
|
26
|
-
case 6:
|
27
|
-
return React.createElement("h6", null, "Heading 6");
|
28
|
-
}
|
29
|
-
};
|
30
|
-
return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.heading({ level }), label: `Heading ${level}` }, headingContent()));
|
31
|
-
};
|
32
|
-
export default HeadingButton;
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { useCommands, useChainedCommands, useActive } from '@remirror/react';
|
3
|
-
import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
|
4
|
-
const ParagraphButton = () => {
|
5
|
-
const { convertParagraph } = useCommands();
|
6
|
-
const chain = useChainedCommands();
|
7
|
-
const active = useActive();
|
8
|
-
const enabled = convertParagraph.enabled();
|
9
|
-
const handleSelect = () => {
|
10
|
-
if (convertParagraph.enabled()) {
|
11
|
-
chain.convertParagraph().focus().run();
|
12
|
-
}
|
13
|
-
};
|
14
|
-
return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.paragraph(), label: "Paragraph" },
|
15
|
-
React.createElement("p", null, "Paragraph")));
|
16
|
-
};
|
17
|
-
export default ParagraphButton;
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { useCommands, useActive } from '@remirror/react';
|
3
|
-
import DropdownButton from '../../../../ui/DropdownButton/DropdownButton';
|
4
|
-
const PreformattedButton = () => {
|
5
|
-
const { togglePreformatted } = useCommands();
|
6
|
-
const active = useActive();
|
7
|
-
const enabled = togglePreformatted.enabled();
|
8
|
-
const handleSelect = () => {
|
9
|
-
if (togglePreformatted.enabled()) {
|
10
|
-
togglePreformatted();
|
11
|
-
}
|
12
|
-
};
|
13
|
-
return (React.createElement(DropdownButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.preformatted(), label: "Preformatted" },
|
14
|
-
React.createElement("pre", null, "Preformatted")));
|
15
|
-
};
|
16
|
-
export default PreformattedButton;
|
@@ -1,35 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import HeadingButton from './Heading/HeadingButton';
|
3
|
-
import ParagraphButton from './Paragraph/ParagraphButton';
|
4
|
-
import PreformattedButton from './Preformatted/PreformattedButton';
|
5
|
-
import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
|
6
|
-
import { useActive, VerticalDivider } from '@remirror/react';
|
7
|
-
const TextTypeDropdown = () => {
|
8
|
-
const active = useActive();
|
9
|
-
const activeLabel = () => {
|
10
|
-
// Determine if preformatted is active
|
11
|
-
if (active.preformatted()) {
|
12
|
-
return 'Preformatted';
|
13
|
-
}
|
14
|
-
// Determine if a heading is active
|
15
|
-
for (let i = 1; i <= 6; i++) {
|
16
|
-
if (active.heading({ level: i })) {
|
17
|
-
return `Heading ${i}`;
|
18
|
-
}
|
19
|
-
}
|
20
|
-
// Default to paragraph
|
21
|
-
return 'Paragraph';
|
22
|
-
};
|
23
|
-
return (React.createElement(React.Fragment, null,
|
24
|
-
React.createElement(ToolbarDropdown, { label: activeLabel() },
|
25
|
-
React.createElement(ParagraphButton, null),
|
26
|
-
React.createElement(HeadingButton, { level: 1 }),
|
27
|
-
React.createElement(HeadingButton, { level: 2 }),
|
28
|
-
React.createElement(HeadingButton, { level: 3 }),
|
29
|
-
React.createElement(HeadingButton, { level: 4 }),
|
30
|
-
React.createElement(HeadingButton, { level: 5 }),
|
31
|
-
React.createElement(HeadingButton, { level: 6 }),
|
32
|
-
React.createElement(PreformattedButton, null)),
|
33
|
-
React.createElement(VerticalDivider, { className: "editor-divider" })));
|
34
|
-
};
|
35
|
-
export default TextTypeDropdown;
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { useCommands, useHelpers } from '@remirror/react';
|
3
|
-
import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
|
4
|
-
import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
|
5
|
-
const UndoButton = () => {
|
6
|
-
const { undo } = useCommands();
|
7
|
-
const { undoDepth } = useHelpers(true);
|
8
|
-
const handleSelect = () => {
|
9
|
-
if (undo.enabled()) {
|
10
|
-
undo();
|
11
|
-
}
|
12
|
-
};
|
13
|
-
const enabled = undoDepth() > 0;
|
14
|
-
return (React.createElement(ToolbarButton, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: false, icon: React.createElement(UndoRoundedIcon, null), label: "Undo (cmd+Z)" }));
|
15
|
-
};
|
16
|
-
export default UndoButton;
|
@@ -1,3 +0,0 @@
|
|
1
|
-
import { BoldExtension, HeadingExtension, NodeFormattingExtension, HistoryExtension } from 'remirror/extensions';
|
2
|
-
import { Extension } from '@remirror/core';
|
3
|
-
export declare const Extensions: () => (BoldExtension | HistoryExtension | HeadingExtension | NodeFormattingExtension | Extension<import("@remirror/core").EmptyShape>)[];
|
@@ -1,13 +0,0 @@
|
|
1
|
-
import { BoldExtension, HeadingExtension, ItalicExtension, NodeFormattingExtension, ParagraphExtension, UnderlineExtension, HistoryExtension, wysiwygPreset, } from 'remirror/extensions';
|
2
|
-
import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
|
3
|
-
export const Extensions = () => [
|
4
|
-
...wysiwygPreset(),
|
5
|
-
new BoldExtension(),
|
6
|
-
new HeadingExtension(),
|
7
|
-
new ItalicExtension(),
|
8
|
-
new NodeFormattingExtension(),
|
9
|
-
new ParagraphExtension(),
|
10
|
-
new PreformattedExtension(),
|
11
|
-
new UnderlineExtension(),
|
12
|
-
new HistoryExtension(),
|
13
|
-
];
|
@@ -1,10 +0,0 @@
|
|
1
|
-
import { ApplySchemaAttributes, CommandFunction, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
|
2
|
-
export declare class PreformattedExtension extends NodeExtension {
|
3
|
-
get name(): "preformatted";
|
4
|
-
createTags(): ("formattingNode" | "block" | "textBlock")[];
|
5
|
-
createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
|
6
|
-
/**
|
7
|
-
* Toggle the <pre> for the current block.
|
8
|
-
*/
|
9
|
-
togglePreformatted(): CommandFunction;
|
10
|
-
}
|