@squiz/formatted-text-editor 1.12.0-alpha.40 → 1.12.0-alpha.9

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.
Files changed (83) hide show
  1. package/README.md +56 -18
  2. package/lib/Editor/Editor.js +9 -3
  3. package/lib/EditorToolbar/EditorToolbar.js +1 -9
  4. package/lib/index.css +94 -800
  5. package/package.json +8 -12
  6. package/.eslintrc.json +0 -34
  7. package/CHANGELOG.md +0 -48
  8. package/build.js +0 -21
  9. package/cypress/e2e/bold.spec.cy.ts +0 -18
  10. package/cypress/global.d.ts +0 -9
  11. package/cypress/support/commands.ts +0 -130
  12. package/cypress/support/e2e.ts +0 -20
  13. package/cypress/tsconfig.json +0 -8
  14. package/cypress.config.ts +0 -7
  15. package/demo/App.tsx +0 -12
  16. package/demo/index.html +0 -13
  17. package/demo/index.scss +0 -1
  18. package/demo/main.tsx +0 -10
  19. package/demo/public/favicon-dxp.svg +0 -3
  20. package/demo/vite-env.d.ts +0 -1
  21. package/file-transformer.js +0 -1
  22. package/jest.config.ts +0 -27
  23. package/lib/EditorToolbar/Tools/Redo/RedoButton.d.ts +0 -2
  24. package/lib/EditorToolbar/Tools/Redo/RedoButton.js +0 -16
  25. package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.d.ts +0 -5
  26. package/lib/EditorToolbar/Tools/TextType/Heading/HeadingButton.js +0 -32
  27. package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.d.ts +0 -2
  28. package/lib/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.js +0 -17
  29. package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.d.ts +0 -2
  30. package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js +0 -16
  31. package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.d.ts +0 -2
  32. package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js +0 -35
  33. package/lib/EditorToolbar/Tools/Undo/UndoButton.d.ts +0 -2
  34. package/lib/EditorToolbar/Tools/Undo/UndoButton.js +0 -16
  35. package/lib/Extensions/Extensions.d.ts +0 -3
  36. package/lib/Extensions/Extensions.js +0 -13
  37. package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts +0 -10
  38. package/lib/Extensions/PreformattedExtension/PreformattedExtension.js +0 -46
  39. package/lib/ui/DropdownButton/DropdownButton.d.ts +0 -9
  40. package/lib/ui/DropdownButton/DropdownButton.js +0 -8
  41. package/lib/ui/ToolbarDropdown/ToolbarDropdown.d.ts +0 -7
  42. package/lib/ui/ToolbarDropdown/ToolbarDropdown.js +0 -12
  43. package/postcss.config.js +0 -3
  44. package/src/Editor/Editor.mock.tsx +0 -40
  45. package/src/Editor/Editor.spec.tsx +0 -254
  46. package/src/Editor/Editor.tsx +0 -32
  47. package/src/Editor/_editor.scss +0 -75
  48. package/src/EditorToolbar/EditorToolbar.tsx +0 -51
  49. package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx +0 -19
  50. package/src/EditorToolbar/Tools/Bold/BoldButton.tsx +0 -30
  51. package/src/EditorToolbar/Tools/Italic/ItalicButton.spec.tsx +0 -19
  52. package/src/EditorToolbar/Tools/Italic/ItalicButton.tsx +0 -30
  53. package/src/EditorToolbar/Tools/Redo/RedoButton.spec.tsx +0 -59
  54. package/src/EditorToolbar/Tools/Redo/RedoButton.tsx +0 -30
  55. package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx +0 -31
  56. package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx +0 -31
  57. package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx +0 -31
  58. package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx +0 -31
  59. package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx +0 -21
  60. package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.tsx +0 -52
  61. package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.tsx +0 -26
  62. package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx +0 -30
  63. package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx +0 -44
  64. package/src/EditorToolbar/Tools/Underline/Underline.spec.tsx +0 -19
  65. package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx +0 -30
  66. package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx +0 -49
  67. package/src/EditorToolbar/Tools/Undo/UndoButton.tsx +0 -30
  68. package/src/EditorToolbar/_editor-toolbar.scss +0 -19
  69. package/src/Extensions/Extensions.tsx +0 -24
  70. package/src/Extensions/PreformattedExtension/PreformattedExtension.tsx +0 -50
  71. package/src/FormattedTextEditor.spec.tsx +0 -10
  72. package/src/FormattedTextEditor.tsx +0 -12
  73. package/src/index.scss +0 -15
  74. package/src/index.ts +0 -3
  75. package/src/ui/DropdownButton/DropdownButton.tsx +0 -28
  76. package/src/ui/DropdownButton/_dropdown-button.scss +0 -7
  77. package/src/ui/ToolbarButton/ToolbarButton.tsx +0 -26
  78. package/src/ui/ToolbarButton/_toolbar-button.scss +0 -37
  79. package/src/ui/ToolbarDropdown/ToolbarDropdown.tsx +0 -32
  80. package/src/ui/ToolbarDropdown/_toolbar-dropdown.scss +0 -27
  81. package/tailwind.config.cjs +0 -62
  82. package/tsconfig.json +0 -22
  83. 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.40",
3
+ "version": "1.12.0-alpha.9",
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
- "gitHead": "8db852ade2813dc297b7d0fa4975e0c5a57ac83e"
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
- });
@@ -1,9 +0,0 @@
1
- /// <reference types="cypress" />
2
-
3
- declare namespace Cypress {
4
- interface Chainable {
5
- // Custom command
6
- selection(subject: any, fn?: any): void;
7
- setSelection(subject: any, query?: any, endQuery?: any): void;
8
- }
9
- }
@@ -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
- }
@@ -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')
@@ -1,8 +0,0 @@
1
- {
2
- "compilerOptions": {
3
- "target": "es5",
4
- "lib": ["es5", "dom"],
5
- "types": ["cypress", "@testing-library/cypress", "node"]
6
- },
7
- "include": ["**/*.ts"]
8
- }
package/cypress.config.ts DELETED
@@ -1,7 +0,0 @@
1
- import { defineConfig } from 'cypress';
2
-
3
- export default defineConfig({
4
- e2e: {
5
- baseUrl: 'http://localhost:8080',
6
- },
7
- });
package/demo/App.tsx DELETED
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- import FormattedTextEditor from '../src/FormattedTextEditor';
3
-
4
- function App() {
5
- return (
6
- <div className="App">
7
- <FormattedTextEditor />
8
- </div>
9
- );
10
- }
11
-
12
- export default App;
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>
@@ -1 +0,0 @@
1
- /// <reference types="vite/client" />
@@ -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,2 +0,0 @@
1
- declare const RedoButton: () => JSX.Element;
2
- export default RedoButton;
@@ -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,5 +0,0 @@
1
- type HeadingButtonProps = {
2
- level: number;
3
- };
4
- declare const HeadingButton: ({ level }: HeadingButtonProps) => JSX.Element;
5
- export default HeadingButton;
@@ -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,2 +0,0 @@
1
- declare const ParagraphButton: () => JSX.Element;
2
- export default ParagraphButton;
@@ -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,2 +0,0 @@
1
- declare const PreformattedButton: () => JSX.Element;
2
- export default PreformattedButton;
@@ -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,2 +0,0 @@
1
- declare const TextTypeDropdown: () => JSX.Element;
2
- export default TextTypeDropdown;
@@ -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,2 +0,0 @@
1
- declare const UndoButton: () => JSX.Element;
2
- export default UndoButton;
@@ -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
- }