From 6190d0b97bc0822da1ce74fa78c82f63f54ebe81 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Sat, 2 Sep 2023 14:11:33 -0400 Subject: [PATCH 1/5] Konnorrogers/fix syntax highlight example (#105) * fix docs, upgrade role-components * fix docs, upgrade role-components --- .changeset/swift-turtles-heal.md | 5 +++ .../entrypoints/syntax-highlighting.js | 5 +-- .../how_tos/09-syntax-highlighting.md | 7 ++-- docs/src/_partials/_head.erb | 1 + package.json | 4 +- pnpm-lock.yaml | 37 +++++++++++++------ src/exports/elements/tip-tap-editor.ts | 4 +- 7 files changed, 41 insertions(+), 22 deletions(-) create mode 100644 .changeset/swift-turtles-heal.md diff --git a/.changeset/swift-turtles-heal.md b/.changeset/swift-turtles-heal.md new file mode 100644 index 00000000..105b44f8 --- /dev/null +++ b/.changeset/swift-turtles-heal.md @@ -0,0 +1,5 @@ +--- +"rhino-editor": patch +--- + +Dependencies: update role-component to v2.0.0 diff --git a/docs/frontend/javascript/entrypoints/syntax-highlighting.js b/docs/frontend/javascript/entrypoints/syntax-highlighting.js index c7cc3f44..b52b86e0 100644 --- a/docs/frontend/javascript/entrypoints/syntax-highlighting.js +++ b/docs/frontend/javascript/entrypoints/syntax-highlighting.js @@ -33,7 +33,4 @@ function extendRhinoEditor (event) { rhinoEditor.rebuildEditor() } -// Because this script is lazy loaded in the docs, we miss out on the `rhino-before-initialize` event. -// In your app you should be able to do: -// document.addEventListener("rhino-before-initialize", extendRhinoEditor) -document.addEventListener("rhino-initialize", extendRhinoEditor) +document.addEventListener("rhino-before-initialize", extendRhinoEditor) diff --git a/docs/src/_documentation/how_tos/09-syntax-highlighting.md b/docs/src/_documentation/how_tos/09-syntax-highlighting.md index 56b0ff33..319f0860 100644 --- a/docs/src/_documentation/how_tos/09-syntax-highlighting.md +++ b/docs/src/_documentation/how_tos/09-syntax-highlighting.md @@ -44,10 +44,11 @@ The next step is to choose a theme. I went with the `OneDark` theme, but feel fr <%= File.read(syntax_highlight_css_file).chomp.html_safe %> ``` - +<% content = "
console.log('Hello World')
".html_safe %> + <% html = capture do %> - + <% end %> diff --git a/docs/src/_partials/_head.erb b/docs/src/_partials/_head.erb index a84752a2..1059a225 100644 --- a/docs/src/_partials/_head.erb +++ b/docs/src/_partials/_head.erb @@ -15,6 +15,7 @@ + diff --git a/package.json b/package.json index 615594ff..95e24763 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "test:unit": "web-test-runner", "test:docs": "playwright test", "start": "pnpm build -- --watch", - "start:docs": "pnpm --filter \"./docs\" start", + "start:docs": "cd docs && overmind start -f Procfile.dev", "start:rails": "cd tests/rails && overmind start -f Procfile.dev", "release": "pnpm run build && changeset version && changeset publish && git push --follow-tags", "changeset": "changeset" @@ -77,7 +77,7 @@ "lit": "^2.8.0", "prosemirror-utils": "1.2.1-0", "prosemirror-view": "1.28.2", - "role-components": "^1.1.4", + "role-components": "^2.0.0", "tslib": "^2.6.2" }, "pnpm": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 22bb5d4d..35d567f9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,8 +48,8 @@ dependencies: specifier: 1.28.2 version: 1.28.2 role-components: - specifier: ^1.1.4 - version: 1.1.5 + specifier: ^2.0.0 + version: 2.0.0 tslib: specifier: ^2.6.2 version: 2.6.2 @@ -814,14 +814,21 @@ packages: '@types/chai': 4.3.5 dev: true - /@floating-ui/core@0.7.3: - resolution: {integrity: sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg==} + /@floating-ui/core@1.4.1: + resolution: {integrity: sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==} + dependencies: + '@floating-ui/utils': 0.1.1 dev: false - /@floating-ui/dom@0.5.4: - resolution: {integrity: sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg==} + /@floating-ui/dom@1.5.1: + resolution: {integrity: sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==} dependencies: - '@floating-ui/core': 0.7.3 + '@floating-ui/core': 1.4.1 + '@floating-ui/utils': 0.1.1 + dev: false + + /@floating-ui/utils@0.1.1: + resolution: {integrity: sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==} dev: false /@github/catalyst@1.6.0: @@ -943,7 +950,6 @@ packages: /@open-wc/dedupe-mixin@1.4.0: resolution: {integrity: sha512-Sj7gKl1TLcDbF7B6KUhtvr+1UCxdhMbNY5KxdU5IfMFWqL8oy1ZeAcCANjoB1TL0AJTcPmcCFsCbHf8X2jGDUA==} - dev: true /@open-wc/scoped-elements@2.2.0: resolution: {integrity: sha512-Qe+vWsuVHFzUkdChwlmJGuQf9cA3I+QOsSHULV/6qf6wsqLM2/32svNRH+rbBIMwiPEwzZprZlkvkqQRucYnVA==} @@ -5625,10 +5631,12 @@ packages: glob: 7.2.0 dev: true - /role-components@1.1.5: - resolution: {integrity: sha512-HCkdLCjNtEPt6Q2e6+q5MXMBvpEJN8PyeejhYAfI42oSGhxNiqOKRG4pROVWuvCObXP+1XU2yTKFrTinfYfY/A==} + /role-components@2.0.0: + resolution: {integrity: sha512-icjNAVpBKmDZV5DIBKH62HV9b1MKtEfYNrCMOpbGcbiIOqf57WeUD4u7rE8hfjUAFKWccwGTOf1vSXBAv2QRpw==} dependencies: - '@floating-ui/dom': 0.5.4 + '@floating-ui/dom': 1.5.1 + lit: 2.8.0 + web-component-define: 2.0.10 dev: false /rollup@3.28.1: @@ -6396,6 +6404,13 @@ packages: defaults: 1.0.4 dev: true + /web-component-define@2.0.10: + resolution: {integrity: sha512-gwkjTFdG8eE8fxI4+RZUCQRy06SSSkCyLpQ1YSCsA+z8ZLlnmqLX/3B3WD2ZraVRtyje3hLXS8bxL8CK1/bZYQ==} + dependencies: + '@lit/reactive-element': 1.6.3 + '@open-wc/dedupe-mixin': 1.4.0 + dev: false + /webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} dev: true diff --git a/src/exports/elements/tip-tap-editor.ts b/src/exports/elements/tip-tap-editor.ts index 9a0a80a1..d4243fba 100644 --- a/src/exports/elements/tip-tap-editor.ts +++ b/src/exports/elements/tip-tap-editor.ts @@ -4,8 +4,8 @@ import { TipTapEditorBase } from "./tip-tap-editor-base.js"; import { PropertyDeclarations, TemplateResult } from "lit"; /** Imports and */ -import { RoleToolbar } from "role-components/dist/toolbar/component.js"; -import { RoleTooltip } from "role-components/dist/tooltip/component.js"; +import RoleToolbar from "role-components/exports/toolbar/toolbar.js"; +import RoleTooltip from "role-components/exports/tooltip/tooltip.js"; import { isiOS, translations } from "../translations.js"; From cbd94b0e21ded72d05f4060c02256fe488ec8125 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Tue, 5 Sep 2023 22:09:16 -0400 Subject: [PATCH 2/5] fix safari side-nav --- docs/frontend/styles/components/_side_nav.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/frontend/styles/components/_side_nav.css b/docs/frontend/styles/components/_side_nav.css index 92d37474..726b2821 100644 --- a/docs/frontend/styles/components/_side_nav.css +++ b/docs/frontend/styles/components/_side_nav.css @@ -1,3 +1,7 @@ +.side-nav ul { + list-style-type: " "; +} + .side-nav__menu { margin: 0; padding-inline-start: 0; From d0858023b1678c66a05f1dad888f0eb270a8e869 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Thu, 7 Sep 2023 17:14:50 -0400 Subject: [PATCH 3/5] fix sidebar links --- docs/frontend/styles/components/_table_of_contents.css | 1 - docs/frontend/styles/overrides/shoelace.css | 6 ++++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/docs/frontend/styles/components/_table_of_contents.css b/docs/frontend/styles/components/_table_of_contents.css index cf5ff926..77d87e4a 100644 --- a/docs/frontend/styles/components/_table_of_contents.css +++ b/docs/frontend/styles/components/_table_of_contents.css @@ -25,7 +25,6 @@ } .table-of-contents__list a { - color: var(--sl-color-neutral-500); text-decoration: none; } diff --git a/docs/frontend/styles/overrides/shoelace.css b/docs/frontend/styles/overrides/shoelace.css index 92dbfb16..8ee8fa86 100644 --- a/docs/frontend/styles/overrides/shoelace.css +++ b/docs/frontend/styles/overrides/shoelace.css @@ -2,3 +2,9 @@ display: none; } +/** Bypass a11y checker. */ +sl-visually-hidden { + background-color: var(--sl-color-neutral-0); + background-color: var(--sl-color-neutral-1000); +} + From a315ebe0340d48ffbaae411a91d62b92be15fc64 Mon Sep 17 00:00:00 2001 From: Konnor Rogers Date: Mon, 11 Sep 2023 11:44:51 -0400 Subject: [PATCH 4/5] Fix: drag and drop works as expected, fix figure margin, fix galleries (#109) * fixing drag and drop * fixing duplicate drags * working on drag + drop * fixing duplicate drags * fix gallery issues with backspace * prettier * need to fix split nodes * fix gallery and figure stuff * clamp start and end values * galleries now work as expected * galleries now work as expected * prettier * add note on styling border on focus * final touches * prettier * fix test suite * add some height to index lists --- .changeset/dry-walls-occur.md | 8 + .changeset/healthy-nails-shop.md | 6 + .changeset/kind-impalas-deliver.md | 5 + .changeset/loud-spoons-trade.md | 5 + .changeset/sour-beers-fix.md | 5 + .changeset/spotty-hats-hug.md | 5 + .changeset/wicked-masks-impress.md | 5 + docs/frontend/styles/_components.css | 1 + docs/frontend/styles/components/_list.css | 3 + .../styles/overrides/rhino-editor.css | 64 +++++ docs/frontend/styles/tokens/_colors.css | 2 + docs/package.json | 4 +- docs/pnpm-lock.yaml | 77 +++--- .../how_tos/02-styling-the-toolbar.md | 88 +++++++ ...d => 03-specifying-accepted-file-types.md} | 0 ...ize-to-json.md => 04-serialize-to-json.md} | 0 ...holder.md => 05-change-the-placeholder.md} | 0 ...modify-hotkeys.md => 06-modify-hotkeys.md} | 0 ...dify-the-position-of-the-file-uploader.md} | 0 ...on.md => 08-add-realtime-collaboration.md} | 0 ...8-table-editing.md => 09-table-editing.md} | 0 ...hlighting.md => 10-syntax-highlighting.md} | 0 ...d => 11-modify-a-file-before-uploading.md} | 0 .../12-change-focus-color-of-the-editor.md | 33 +++ docs/src/_layouts/index.erb | 2 +- docs/src/_partials/_logo.erb | 2 +- package.json | 20 +- pnpm-lock.yaml | 134 +++++----- src/exports/elements/tip-tap-editor-base.ts | 72 ++++-- src/exports/elements/tip-tap-editor.ts | 45 ++-- src/exports/extensions/attachment.ts | 234 ++++++++++++------ src/exports/extensions/gallery.ts | 58 ++++- src/exports/styles/editor.js | 20 +- src/exports/styles/trix-core.css | 11 + src/exports/styles/trix.css | 11 + .../specifying-accepted-file-types.test.js | 4 +- tests/unit/events.test.js | 19 +- 37 files changed, 696 insertions(+), 247 deletions(-) create mode 100644 .changeset/dry-walls-occur.md create mode 100644 .changeset/healthy-nails-shop.md create mode 100644 .changeset/kind-impalas-deliver.md create mode 100644 .changeset/loud-spoons-trade.md create mode 100644 .changeset/sour-beers-fix.md create mode 100644 .changeset/spotty-hats-hug.md create mode 100644 .changeset/wicked-masks-impress.md create mode 100644 docs/frontend/styles/components/_list.css create mode 100644 docs/src/_documentation/how_tos/02-styling-the-toolbar.md rename docs/src/_documentation/how_tos/{02-specifying-accepted-file-types.md => 03-specifying-accepted-file-types.md} (100%) rename docs/src/_documentation/how_tos/{03-serialize-to-json.md => 04-serialize-to-json.md} (100%) rename docs/src/_documentation/how_tos/{04-change-the-placeholder.md => 05-change-the-placeholder.md} (100%) rename docs/src/_documentation/how_tos/{05-modify-hotkeys.md => 06-modify-hotkeys.md} (100%) rename docs/src/_documentation/how_tos/{06-modify-the-position-of-the-file-uploader.md => 07-modify-the-position-of-the-file-uploader.md} (100%) rename docs/src/_documentation/how_tos/{07-add-realtime-collaboration.md => 08-add-realtime-collaboration.md} (100%) rename docs/src/_documentation/how_tos/{08-table-editing.md => 09-table-editing.md} (100%) rename docs/src/_documentation/how_tos/{09-syntax-highlighting.md => 10-syntax-highlighting.md} (100%) rename docs/src/_documentation/how_tos/{10-modify-a-file-before-uploading.md => 11-modify-a-file-before-uploading.md} (100%) create mode 100644 docs/src/_documentation/how_tos/12-change-focus-color-of-the-editor.md diff --git a/.changeset/dry-walls-occur.md b/.changeset/dry-walls-occur.md new file mode 100644 index 00000000..3faa3416 --- /dev/null +++ b/.changeset/dry-walls-occur.md @@ -0,0 +1,8 @@ +--- +"rhino-editor": patch +--- + +- The editor no longer inserts `

` tags above and below an attachment +- `

` now has a default margin of `0.6em 0` to align with Trix. +- Updated to role-components v2.0.1 +- Added docs on styling the border of the toolbar diff --git a/.changeset/healthy-nails-shop.md b/.changeset/healthy-nails-shop.md new file mode 100644 index 00000000..799bce67 --- /dev/null +++ b/.changeset/healthy-nails-shop.md @@ -0,0 +1,6 @@ +--- +"rhino-editor": minor +--- + +BREAKING_CHANGE: CSS parts have changed slightly to create a more consistent naming conventions. `toolbar-tooltip` has been renamed to `toolbar__tooltip` along with other parts being slightly modified. `link-dialog__add-link` changed to +`link-dialog__link`. diff --git a/.changeset/kind-impalas-deliver.md b/.changeset/kind-impalas-deliver.md new file mode 100644 index 00000000..72967ab7 --- /dev/null +++ b/.changeset/kind-impalas-deliver.md @@ -0,0 +1,5 @@ +--- +"rhino-editor": patch +--- + +- Fixed CSS for attachment galleries diff --git a/.changeset/loud-spoons-trade.md b/.changeset/loud-spoons-trade.md new file mode 100644 index 00000000..161f18ae --- /dev/null +++ b/.changeset/loud-spoons-trade.md @@ -0,0 +1,5 @@ +--- +"rhino-editor": patch +--- + +- Added the ability to press the "Enter" key inside a `
` and end up on the next line. diff --git a/.changeset/sour-beers-fix.md b/.changeset/sour-beers-fix.md new file mode 100644 index 00000000..72c29102 --- /dev/null +++ b/.changeset/sour-beers-fix.md @@ -0,0 +1,5 @@ +--- +"rhino-editor": patch +--- + +- Fixed a bug with dropcursor not showing diff --git a/.changeset/spotty-hats-hug.md b/.changeset/spotty-hats-hug.md new file mode 100644 index 00000000..d130de6a --- /dev/null +++ b/.changeset/spotty-hats-hug.md @@ -0,0 +1,5 @@ +--- +"rhino-editor": minor +--- + +- BREAKING_CHANGE: `handleFiles` now no longer automatically chains events. Instead now it returns the attachmentManagers to be chained. diff --git a/.changeset/wicked-masks-impress.md b/.changeset/wicked-masks-impress.md new file mode 100644 index 00000000..a58cc57d --- /dev/null +++ b/.changeset/wicked-masks-impress.md @@ -0,0 +1,5 @@ +--- +"rhino-editor": patch +--- + +- Fixed a bug where pressing backspace inside a `
` or a Gallery would cause the attachment to no longer be in the gallery diff --git a/docs/frontend/styles/_components.css b/docs/frontend/styles/_components.css index b641f270..aaf92d74 100644 --- a/docs/frontend/styles/_components.css +++ b/docs/frontend/styles/_components.css @@ -10,6 +10,7 @@ @import "./components/_hero.css"; @import "./components/_input.css"; @import "./components/_layout.css"; +@import "./components/_list.css"; @import "./components/_link.css"; @import "./components/_logo.css"; @import "./components/_main_list.css"; diff --git a/docs/frontend/styles/components/_list.css b/docs/frontend/styles/components/_list.css new file mode 100644 index 00000000..ddbc442f --- /dev/null +++ b/docs/frontend/styles/components/_list.css @@ -0,0 +1,3 @@ +ul.list li { + line-height: 2.5; +} diff --git a/docs/frontend/styles/overrides/rhino-editor.css b/docs/frontend/styles/overrides/rhino-editor.css index d12383d7..4d1740e6 100644 --- a/docs/frontend/styles/overrides/rhino-editor.css +++ b/docs/frontend/styles/overrides/rhino-editor.css @@ -2,4 +2,68 @@ position: relative; margin: 1rem 0rem; } +/* Rhino Editor */ + +.sl-theme-dark .rhino-editor, +.sl-theme-dark .trix-content { + --rhino-button-color: var(--sl-color-neutral-700); + --rhino-button-disabled-text-color: var(--sl-color-neutral-300); + --rhino-toolbar-text-color: var(--sl-color-neutral-700); + --rhino-button-active-border-color: var(--sl-color-primary-700); + --rhino-button-active-background-color: var(--sl-color-primary-200); + color: white; +} + + +.sl-theme-dark .rhino-editor::part(toolbar__button):is(:focus, :hover) { + color: black; +} + +.sl-theme-dark .rhino-editor::part(toolbar__button toolbar__button--active):is(:focus, :hover) { + color: white; +} + + +.sl-theme-dark .rhino-editor::part(toolbar__button--active) { + color: var(--sl-color-primary-800); +} + +.sl-theme-dark .rhino-editor::part(toolbar__button toolbar__button--disabled):is(:focus, :hover) { + color: var(--sl-color-neutral-300); +} + +.sl-theme-dark .rhino-editor::part(link-dialog__container) { + background-color: black; + border: 1px solid white; + box-shadow: none; +} + +.sl-theme-dark .rhino-editor::part(link-dialog__input--invalid) { + color: var(--sl-color-red-200); +} + +.sl-theme-dark .rhino-editor::part(tooltip-base) { + border: 1px solid white; +} + +.sl-theme-dark .rhino-editor::part(tooltip-arrow) { + border-right: 1px solid white; + border-bottom: 1px solid white; +} + +.sl-theme-dark .trix-content .attachment--preview .attachment__caption { + color: var(--sl-color-neutral-700); +} + +.sl-theme-dark rhino-attachment-editor::part(delete-button) { + color: black; +} + +.sl-theme-dark .trix-content pre { + color: black; +} + +.sl-theme-dark .trix-content blockquote { + color: var(--sl-color-neutral-700); +} diff --git a/docs/frontend/styles/tokens/_colors.css b/docs/frontend/styles/tokens/_colors.css index aff22a2a..482512da 100644 --- a/docs/frontend/styles/tokens/_colors.css +++ b/docs/frontend/styles/tokens/_colors.css @@ -6,6 +6,8 @@ html.sl-theme-dark { --light-text-color: var(--sl-color-neutral-700); --body-color: var(--sl-color-neutral-0); + --logo-color: var(--sl-color-neutral-1000); + --input-border-color: var(--divider-color); --input-bg-color: var(--sl-color-neutral-0); --input-transition: 100ms box-shadow ease-in-out; diff --git a/docs/package.json b/docs/package.json index 6cedc0d1..9acd2b69 100644 --- a/docs/package.json +++ b/docs/package.json @@ -23,8 +23,8 @@ "@hotwired/turbo": "^7.3.0", "@konnorr/bridgetown-quick-search": "^3.7.4", "@shoelace-style/shoelace": "^2.7.0", - "@tiptap/extension-character-count": "^2.1.7", - "@tiptap/extension-code-block-lowlight": "^2.1.7", + "@tiptap/extension-character-count": "2.1.7", + "@tiptap/extension-code-block-lowlight": "2.1.7", "linkifyjs": "^4.1.1", "lowlight": "^2.9.0", "prosemirror-view": "1.28.2", diff --git a/docs/pnpm-lock.yaml b/docs/pnpm-lock.yaml index 2da9eb47..385ca876 100644 --- a/docs/pnpm-lock.yaml +++ b/docs/pnpm-lock.yaml @@ -25,11 +25,11 @@ dependencies: specifier: ^2.7.0 version: 2.7.0 '@tiptap/extension-character-count': - specifier: ^2.1.7 - version: 2.1.7(@tiptap/core@2.0.4)(@tiptap/pm@2.0.4) + specifier: 2.1.7 + version: 2.1.7(@tiptap/core@2.1.8)(@tiptap/pm@2.1.8) '@tiptap/extension-code-block-lowlight': - specifier: ^2.1.7 - version: 2.1.7(@tiptap/core@2.0.4)(@tiptap/extension-code-block@2.1.7)(@tiptap/pm@2.0.4) + specifier: 2.1.7 + version: 2.1.7(@tiptap/core@2.1.8)(@tiptap/extension-code-block@2.1.8)(@tiptap/pm@2.1.8) linkifyjs: specifier: ^4.1.1 version: 4.1.1 @@ -315,7 +315,7 @@ packages: dependencies: '@remirror/core-constants': 2.0.2 '@remirror/types': 1.0.1 - '@types/object.omit': 3.0.0 + '@types/object.omit': 3.0.1 '@types/object.pick': 1.3.2 '@types/throttle-debounce': 2.1.0 case-anything: 2.1.13 @@ -356,52 +356,49 @@ packages: qr-creator: 1.0.0 dev: false - /@tiptap/core@2.0.4(@tiptap/pm@2.0.4): - resolution: {integrity: sha512-2YOMjRqoBGEP4YGgYpuPuBBJHMeqKOhLnS0WVwjVP84zOmMgZ7A8M6ILC9Xr7Q/qHZCvyBGWOSsI7+3HsEzzYQ==} + /@tiptap/core@2.1.8(@tiptap/pm@2.1.8): + resolution: {integrity: sha512-QTGgqki7hkonLJ93gWqCUkD6cCAQ3rEX9gbMLwzfnegIZ+/BKLQYKYCozsEMZnMPXgdRrKuyRBOL+RH+IolMeA==} peerDependencies: '@tiptap/pm': ^2.0.0 dependencies: - '@tiptap/pm': 2.0.4(@tiptap/core@2.0.4) + '@tiptap/pm': 2.1.8 dev: false - /@tiptap/extension-character-count@2.1.7(@tiptap/core@2.0.4)(@tiptap/pm@2.0.4): + /@tiptap/extension-character-count@2.1.7(@tiptap/core@2.1.8)(@tiptap/pm@2.1.8): resolution: {integrity: sha512-SDM5iTGbwDLFujmfubDv1oHKeBAHQPkvOe5Qwtae/xnbJcIxV3sUbQ3WrctjOpRrh+tSHEXS5JVhHzsoNZLRkQ==} peerDependencies: '@tiptap/core': ^2.0.0 '@tiptap/pm': ^2.0.0 dependencies: - '@tiptap/core': 2.0.4(@tiptap/pm@2.0.4) - '@tiptap/pm': 2.0.4(@tiptap/core@2.0.4) + '@tiptap/core': 2.1.8(@tiptap/pm@2.1.8) + '@tiptap/pm': 2.1.8 dev: false - /@tiptap/extension-code-block-lowlight@2.1.7(@tiptap/core@2.0.4)(@tiptap/extension-code-block@2.1.7)(@tiptap/pm@2.0.4): + /@tiptap/extension-code-block-lowlight@2.1.7(@tiptap/core@2.1.8)(@tiptap/extension-code-block@2.1.8)(@tiptap/pm@2.1.8): resolution: {integrity: sha512-GOmpe3bwjlhMC79vFICInkJwaHx5dTiKQCTzdjZ5qRsvKgk/0YTrmWaN+w+JW5BBUaChj8IrgAPy7VZ20l7GKQ==} peerDependencies: '@tiptap/core': ^2.0.0 '@tiptap/extension-code-block': ^2.0.0 '@tiptap/pm': ^2.0.0 dependencies: - '@tiptap/core': 2.0.4(@tiptap/pm@2.0.4) - '@tiptap/extension-code-block': 2.1.7(@tiptap/core@2.0.4)(@tiptap/pm@2.0.4) - '@tiptap/pm': 2.0.4(@tiptap/core@2.0.4) + '@tiptap/core': 2.1.8(@tiptap/pm@2.1.8) + '@tiptap/extension-code-block': 2.1.8(@tiptap/core@2.1.8)(@tiptap/pm@2.1.8) + '@tiptap/pm': 2.1.8 dev: false - /@tiptap/extension-code-block@2.1.7(@tiptap/core@2.0.4)(@tiptap/pm@2.0.4): - resolution: {integrity: sha512-uiasfWCIQuk34vGoIENqAJOHf9m3hAkcELnb9T6+uNxA3O7PUZQqBVN/27oEipj7j15pqua50D6C1jql9kFe0g==} + /@tiptap/extension-code-block@2.1.8(@tiptap/core@2.1.8)(@tiptap/pm@2.1.8): + resolution: {integrity: sha512-EjegLBBz8ATvIuJlqosGrcOsKNu8YveI8rogGfUmnXWMNcPSSqBDoWK2EpLTUzGccPWRxo7yBsr5wItikfPPYA==} peerDependencies: '@tiptap/core': ^2.0.0 '@tiptap/pm': ^2.0.0 dependencies: - '@tiptap/core': 2.0.4(@tiptap/pm@2.0.4) - '@tiptap/pm': 2.0.4(@tiptap/core@2.0.4) + '@tiptap/core': 2.1.8(@tiptap/pm@2.1.8) + '@tiptap/pm': 2.1.8 dev: false - /@tiptap/pm@2.0.4(@tiptap/core@2.0.4): - resolution: {integrity: sha512-DNgxntpEaiW7ciW0BTNTL0TFqAreZTrAROWakI4XaYRAyi5H9NfZW8jmwGwMBkoZ1KB3pfy+jT/Bisy4okEQGQ==} - peerDependencies: - '@tiptap/core': ^2.0.0 + /@tiptap/pm@2.1.8: + resolution: {integrity: sha512-H3NGAu5xdH1PpXa6OQlvecaWJIZR/9tVkc1mdpLanvG7mW85DuY+5fC36Xnv9SPMVcO3zWXS6Ii4os6HbdP6bQ==} dependencies: - '@tiptap/core': 2.0.4(@tiptap/pm@2.0.4) prosemirror-changeset: 2.2.1 prosemirror-collab: 1.3.1 prosemirror-commands: 1.5.2 @@ -411,14 +408,14 @@ packages: prosemirror-inputrules: 1.2.1 prosemirror-keymap: 1.2.2 prosemirror-markdown: 1.11.2 - prosemirror-menu: 1.2.2 + prosemirror-menu: 1.2.4 prosemirror-model: 1.19.3 prosemirror-schema-basic: 1.2.2 prosemirror-schema-list: 1.3.0 prosemirror-state: 1.4.3 prosemirror-tables: 1.3.4 prosemirror-trailing-node: 2.0.7(prosemirror-model@1.19.3)(prosemirror-state@1.4.3)(prosemirror-view@1.28.2) - prosemirror-transform: 1.7.4 + prosemirror-transform: 1.7.5 prosemirror-view: 1.28.2 dev: false @@ -428,8 +425,8 @@ packages: '@types/unist': 2.0.7 dev: false - /@types/object.omit@3.0.0: - resolution: {integrity: sha512-I27IoPpH250TUzc9FzXd0P1BV/BMJuzqD3jOz98ehf9dQqGkxlq+hO1bIqZGWqCg5bVOy0g4AUVJtnxe0klDmw==} + /@types/object.omit@3.0.1: + resolution: {integrity: sha512-24XD34UeRWw505TsMNBrQ4bES2s8IxiFC59mmNUFhTz9IX2hAtA7gQ8wVww1i17QmhBYILg5iqYP2y7aqA3pwQ==} dev: false /@types/object.pick@1.3.2: @@ -1397,7 +1394,7 @@ packages: /prosemirror-changeset@2.2.1: resolution: {integrity: sha512-J7msc6wbxB4ekDFj+n9gTW/jav/p53kdlivvuppHsrZXCaQdVgRghoZbSS3kwrRyAstRVQ4/+u5k7YfLgkkQvQ==} dependencies: - prosemirror-transform: 1.7.4 + prosemirror-transform: 1.7.5 dev: false /prosemirror-collab@1.3.1: @@ -1411,14 +1408,14 @@ packages: dependencies: prosemirror-model: 1.19.3 prosemirror-state: 1.4.3 - prosemirror-transform: 1.7.4 + prosemirror-transform: 1.7.5 dev: false /prosemirror-dropcursor@1.8.1: resolution: {integrity: sha512-M30WJdJZLyXHi3N8vxN6Zh5O8ZBbQCz0gURTfPmTIBNQ5pxrdU7A58QkNqfa98YEjSAL1HUyyU34f6Pm5xBSGw==} dependencies: prosemirror-state: 1.4.3 - prosemirror-transform: 1.7.4 + prosemirror-transform: 1.7.5 prosemirror-view: 1.28.2 dev: false @@ -1435,7 +1432,7 @@ packages: resolution: {integrity: sha512-/zm0XoU/N/+u7i5zepjmZAEnpvjDtzoPWW6VmKptcAnPadN/SStsBjMImdCEbb3seiNTpveziPTIrXQbHLtU1g==} dependencies: prosemirror-state: 1.4.3 - prosemirror-transform: 1.7.4 + prosemirror-transform: 1.7.5 prosemirror-view: 1.28.2 rope-sequence: 1.3.4 dev: false @@ -1444,7 +1441,7 @@ packages: resolution: {integrity: sha512-3LrWJX1+ULRh5SZvbIQlwZafOXqp1XuV21MGBu/i5xsztd+9VD15x6OtN6mdqSFI7/8Y77gYUbQ6vwwJ4mr6QQ==} dependencies: prosemirror-state: 1.4.3 - prosemirror-transform: 1.7.4 + prosemirror-transform: 1.7.5 dev: false /prosemirror-keymap@1.2.2: @@ -1461,8 +1458,8 @@ packages: prosemirror-model: 1.19.3 dev: false - /prosemirror-menu@1.2.2: - resolution: {integrity: sha512-437HIWTq4F9cTX+kPfqZWWm+luJm95Aut/mLUy+9OMrOml0bmWDS26ceC6SNfb2/S94et1sZ186vLO7pDHzxSw==} + /prosemirror-menu@1.2.4: + resolution: {integrity: sha512-S/bXlc0ODQup6aiBbWVsX/eM+xJgCTAfMq/nLqaO5ID/am4wS0tTCIkzwytmao7ypEtjj39i7YbJjAgO20mIqA==} dependencies: crelt: 1.0.6 prosemirror-commands: 1.5.2 @@ -1487,7 +1484,7 @@ packages: dependencies: prosemirror-model: 1.19.3 prosemirror-state: 1.4.3 - prosemirror-transform: 1.7.4 + prosemirror-transform: 1.7.5 dev: false /prosemirror-state@1.4.3: @@ -1504,7 +1501,7 @@ packages: prosemirror-keymap: 1.2.2 prosemirror-model: 1.19.3 prosemirror-state: 1.4.3 - prosemirror-transform: 1.7.4 + prosemirror-transform: 1.7.5 prosemirror-view: 1.28.2 dev: false @@ -1529,6 +1526,12 @@ packages: prosemirror-model: 1.19.3 dev: false + /prosemirror-transform@1.7.5: + resolution: {integrity: sha512-U/fWB6frEzY7dzwJUo+ir8dU1JEanaI/RwL12Imy9js/527N0v/IRUKewocP1kTq998JNT18IGtThaDLwLOBxQ==} + dependencies: + prosemirror-model: 1.19.3 + dev: false + /prosemirror-view@1.28.2: resolution: {integrity: sha512-uK28mJbu0GI8Oz7Aclt6BKL4g+C59EBShBXDB0Y9Y71H25p4bQgmLQLfDWjsT1J9XOw0bR8QQajZmdK8RvXI9g==} dependencies: diff --git a/docs/src/_documentation/how_tos/02-styling-the-toolbar.md b/docs/src/_documentation/how_tos/02-styling-the-toolbar.md new file mode 100644 index 00000000..29c30e13 --- /dev/null +++ b/docs/src/_documentation/how_tos/02-styling-the-toolbar.md @@ -0,0 +1,88 @@ +--- +title: Styling the toolbar +permalink: /how_tos/styling-the-toolbar/ +--- + + +The toolbar in Rhino Editor is implemented using a custom element. I created +the custom element to be a proper [Toolbar](https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/) + +You can style the toolbar like so: + +```css +.rhino-editor::part(toolbar) {} +``` + +But this may not always be enough. If you need to for example remove the `border-color` you'd +want to do: + +```css +.rhino-editor::part(toolbar__base) { + border-color: transparent; +} +``` + +Putting it altogether, we could do something like this and make the toolbar look closer +to the one that ship with Trix. + + +<% css = capture do %> +#toolbar-styling-example::part(toolbar) { + margin-bottom: 1rem; +} + +#toolbar-styling-example::part(toolbar__base) { + /* 1px so we can show the outline of the buttons */ + padding-left: 1px; + padding-right: 1px; + border-color: transparent; +} +<% end.chomp.html_safe %> + +```css +<%= css %> +``` + + + + + +## Styling the buttons + +Bringing it one step further, we can look at what it takes to style buttons. + +Buttons also have `part`s attached to them. + +Here's an example of the parts available on the `undo` button. + +```css +/* Applies to all toolbar buttons */ +.rhino-editor::part(toolbar__button) {} + +/* Applies to "active" buttons which in practical terms is any button highlighted blue due to it being active in the editor. */ +.rhino-editor::part(toolbar__button--active) {} + +/* Applies to "disabled" buttons (buttons which are not currently usable) */ +.rhino-editor::part(toolbar__button--disable) {} + +/* Only applies to undo button */ +.rhino-editor::part(toolbar__button--undo) {} +``` + +Buttons also have `tooltip` parts you can tap into. + +```css +.rhino-editor::part(toolbar__tooltip) {} +.rhino-editor::part(toolbar__tooltip--undo) {} +``` + +Buttons also have `slot`s available if the CSS parts aren't enough. + +```html + + + + +``` diff --git a/docs/src/_documentation/how_tos/02-specifying-accepted-file-types.md b/docs/src/_documentation/how_tos/03-specifying-accepted-file-types.md similarity index 100% rename from docs/src/_documentation/how_tos/02-specifying-accepted-file-types.md rename to docs/src/_documentation/how_tos/03-specifying-accepted-file-types.md diff --git a/docs/src/_documentation/how_tos/03-serialize-to-json.md b/docs/src/_documentation/how_tos/04-serialize-to-json.md similarity index 100% rename from docs/src/_documentation/how_tos/03-serialize-to-json.md rename to docs/src/_documentation/how_tos/04-serialize-to-json.md diff --git a/docs/src/_documentation/how_tos/04-change-the-placeholder.md b/docs/src/_documentation/how_tos/05-change-the-placeholder.md similarity index 100% rename from docs/src/_documentation/how_tos/04-change-the-placeholder.md rename to docs/src/_documentation/how_tos/05-change-the-placeholder.md diff --git a/docs/src/_documentation/how_tos/05-modify-hotkeys.md b/docs/src/_documentation/how_tos/06-modify-hotkeys.md similarity index 100% rename from docs/src/_documentation/how_tos/05-modify-hotkeys.md rename to docs/src/_documentation/how_tos/06-modify-hotkeys.md diff --git a/docs/src/_documentation/how_tos/06-modify-the-position-of-the-file-uploader.md b/docs/src/_documentation/how_tos/07-modify-the-position-of-the-file-uploader.md similarity index 100% rename from docs/src/_documentation/how_tos/06-modify-the-position-of-the-file-uploader.md rename to docs/src/_documentation/how_tos/07-modify-the-position-of-the-file-uploader.md diff --git a/docs/src/_documentation/how_tos/07-add-realtime-collaboration.md b/docs/src/_documentation/how_tos/08-add-realtime-collaboration.md similarity index 100% rename from docs/src/_documentation/how_tos/07-add-realtime-collaboration.md rename to docs/src/_documentation/how_tos/08-add-realtime-collaboration.md diff --git a/docs/src/_documentation/how_tos/08-table-editing.md b/docs/src/_documentation/how_tos/09-table-editing.md similarity index 100% rename from docs/src/_documentation/how_tos/08-table-editing.md rename to docs/src/_documentation/how_tos/09-table-editing.md diff --git a/docs/src/_documentation/how_tos/09-syntax-highlighting.md b/docs/src/_documentation/how_tos/10-syntax-highlighting.md similarity index 100% rename from docs/src/_documentation/how_tos/09-syntax-highlighting.md rename to docs/src/_documentation/how_tos/10-syntax-highlighting.md diff --git a/docs/src/_documentation/how_tos/10-modify-a-file-before-uploading.md b/docs/src/_documentation/how_tos/11-modify-a-file-before-uploading.md similarity index 100% rename from docs/src/_documentation/how_tos/10-modify-a-file-before-uploading.md rename to docs/src/_documentation/how_tos/11-modify-a-file-before-uploading.md diff --git a/docs/src/_documentation/how_tos/12-change-focus-color-of-the-editor.md b/docs/src/_documentation/how_tos/12-change-focus-color-of-the-editor.md new file mode 100644 index 00000000..772a7ea0 --- /dev/null +++ b/docs/src/_documentation/how_tos/12-change-focus-color-of-the-editor.md @@ -0,0 +1,33 @@ +--- +title: Change the editor border on focus +permalink: /change-the-editor-border-on-focus/ +--- + +This is kind of a silly example, but instead of using `:focus`, the default styles use +`:focus-within`. Let's make it super obvious how we can changed the border color on `:focus-within` + +<% css = capture do %> +rhino-editor .trix-content { + border-width: 3px; + border-color: blue; +} + +rhino-editor .trix-content:focus-within { + border-color: red; +} +<% end.html_safe.chomp %> + + + +```css +<%= css %> +``` + + + + + + +Pretty straightforward! But worth documenting since most people would expect to override `:focus`. diff --git a/docs/src/_layouts/index.erb b/docs/src/_layouts/index.erb index 8116936d..627d1750 100644 --- a/docs/src/_layouts/index.erb +++ b/docs/src/_layouts/index.erb @@ -2,7 +2,7 @@ layout: doc --- -
`; @@ -520,81 +556,137 @@ export const Attachment = Node.create({ return { dom, contentDOM, + update() { + return false; + }, }; }; }, addCommands() { return { + setAttachmentAtCoords: + ( + options: AttachmentManager | AttachmentManager[], + coordinates: { left: number; top: number }, + ) => + ({ view, state, tr, dispatch }) => { + let posAtCoords = view.posAtCoords(coordinates); + + const currentSelection = state.doc.resolve(posAtCoords?.pos || 0); + return handleAttachment(options, currentSelection, { + state, + tr, + dispatch, + }); + }, setAttachment: (options: AttachmentManager | AttachmentManager[]) => ({ state, tr, dispatch }) => { - const { schema } = state; - - // Attachments disabled, dont pass go. - const hasGalleriesDisabled = - schema.nodes["attachment-gallery"] == null; - const currentSelection = state.doc.resolve(state.selection.anchor); - const before = - state.selection.anchor - 2 < 0 ? 0 : state.selection.anchor - 2; - const nodeBefore = state.doc.resolve(before); - - // If we're in a paragraph directly following a gallery. - const isInGalleryCurrent = - currentSelection.node(1).type.name === "attachment-gallery"; - const isInGalleryAfter = - nodeBefore.node(1)?.type.name === "attachment-gallery"; - - const isInGallery = isInGalleryCurrent || isInGalleryAfter; - - const attachments: AttachmentManager[] = Array.isArray(options) - ? options - : ([] as AttachmentManager[]).concat(options); - - let attachmentNodes = attachments.map((attachment) => { - return schema.nodes["attachment-figure"].create( - attachment, - attachment.caption ? [schema.text(attachment.caption)] : [], - ); + return handleAttachment(options, currentSelection, { + state, + tr, + dispatch, }); - - const end = currentSelection.end(); - - if (hasGalleriesDisabled) { - attachmentNodes = attachmentNodes.flatMap((node) => [ - node, - schema.nodes.paragraph.create(), - ]); - tr.insert(end, attachmentNodes); - - if (dispatch) dispatch(tr); - return true; - } - - if (isInGallery) { - const backtrack = isInGalleryCurrent ? 0 : 2; - tr.insert(end - backtrack, attachmentNodes); - } else { - const currSelection = state.selection; - - const gallery = schema.nodes["attachment-gallery"].create( - {}, - attachmentNodes, - ); - - tr.replaceWith(currSelection.from - 1, currSelection.to, [ - schema.nodes.paragraph.create(), - gallery, - schema.nodes.paragraph.create(), - ]); - - selectionToInsertionEnd(tr, tr.steps.length - 1, -1); - } - - if (dispatch) dispatch(tr); - return true; }, }; }, }); + +function handleAttachment( + options: AttachmentManager | AttachmentManager[], + currentSelection: ResolvedPos, + { state, tr, dispatch }: Pick, +) { + const { schema } = state; + + const minSize = 0; + const maxSize = tr.doc.content.size; + + function clamp(val: number, min: number = minSize, max: number = maxSize) { + if (val < min) return min; + if (val > max) return max; + return val; + } + + // Attachments disabled, dont pass go. + const hasGalleriesDisabled = schema.nodes["attachment-gallery"] == null; + + const currentNode = state.doc.resolve(currentSelection.pos); + const paragraphTopNode = findParentNodeOfTypeClosestToPos( + currentNode, + schema.nodes["paragraph"], + ); + + let currentGallery = findParentNodeOfTypeClosestToPos( + state.doc.resolve(currentSelection.pos), + schema.nodes["attachment-gallery"], + ); + + let priorGalleryPos = null; + + if (paragraphTopNode) { + const paragraphIsEmpty = currentSelection.parent.textContent === ""; + const prevNode = state.doc.resolve(clamp(paragraphTopNode.pos - 1)); + + if ( + paragraphIsEmpty && + prevNode.parent.type.name === "attachment-gallery" + ) { + priorGalleryPos = clamp(paragraphTopNode.pos - 1); + } + } + + const isInGallery = currentGallery || priorGalleryPos; + + const attachments: AttachmentManager[] = Array.isArray(options) + ? options + : ([] as AttachmentManager[]).concat(options); + + let attachmentNodes = attachments.map((attachment) => { + return schema.nodes["attachment-figure"].create( + attachment, + attachment.caption ? [schema.text(attachment.caption)] : [], + ); + }); + + let end = 0; + + if (currentGallery) { + end = currentGallery.start + currentGallery.node.nodeSize - 2; + } else if (priorGalleryPos != null) { + end = priorGalleryPos; + } + + end = clamp(end); + + if (hasGalleriesDisabled) { + attachmentNodes = attachmentNodes.flatMap((node) => [node]); + tr.insert(end, attachmentNodes.concat([schema.nodes.paragraph.create()])); + + if (dispatch) dispatch(tr); + return true; + } + + if (isInGallery) { + tr.insert(end, attachmentNodes); + } else { + const currSelection = state.selection; + + const gallery = schema.nodes["attachment-gallery"].create( + {}, + attachmentNodes, + ); + + tr.replaceWith(currSelection.from - 1, currSelection.to, [ + gallery, + schema.nodes.paragraph.create(), + ]); + + selectionToInsertionEnd(tr, tr.steps.length - 1, -1); + } + + if (dispatch) dispatch(tr); + return true; +} diff --git a/src/exports/extensions/gallery.ts b/src/exports/extensions/gallery.ts index 30a13b12..8b7fa291 100644 --- a/src/exports/extensions/gallery.ts +++ b/src/exports/extensions/gallery.ts @@ -1,8 +1,16 @@ -import { mergeAttributes, Node } from "@tiptap/core"; +import { mergeAttributes, Node, selectionToInsertionEnd } from "@tiptap/core"; import { EditorState, Plugin, Transaction } from "@tiptap/pm/state"; +import { + chainCommands, + createParagraphNear, + // liftEmptyBlock, + // newlineInCode, + // selectNodeForward, +} from "@tiptap/pm/commands"; import { Node as ProseMirrorNode } from "@tiptap/pm/model"; +import { findParentNodeOfTypeClosestToPos } from "prosemirror-utils"; -function handleGallery( +function replaceEmptyGalleryWithParagraph( node: ProseMirrorNode, tr: Transaction, newState: EditorState, @@ -50,13 +58,57 @@ export const Gallery = Node.create({ addProseMirrorPlugins() { return [ new Plugin({ + props: { + handleDOMEvents: { + keydown: (view, event) => { + if (event.key === "Enter") { + const nodeType = view.state.selection.$head.parent.type.name; + if (nodeType === "attachment-gallery") { + event.preventDefault(); + + chainCommands(createParagraphNear)(view.state, view.dispatch); + return true; + } + + if (nodeType === "attachment-figure") { + event.preventDefault(); + + chainCommands(createParagraphNear)(view.state, view.dispatch); + + const containingGallery = findParentNodeOfTypeClosestToPos( + view.state.selection.$anchor, + view.state.schema.nodes["attachment-gallery"], + ); + + // TODO: Right now this just prevents us from splitting a gallery / figure. + // Ideally, we should check `nodesBetween` and any `figures` get placed into a new gallery under the inserted paragraph like Trix does. + if (containingGallery) { + const tr = view.state.tr; + tr.insert( + containingGallery.pos + containingGallery.node.nodeSize, + view.state.schema.nodes["paragraph"].create(), + ); + selectionToInsertionEnd(tr, tr.steps.length - 1, -1); + + view.dispatch(tr); + } + return true; + } + } + + return false; + }, + }, + }, appendTransaction: (_transactions, _oldState, newState) => { const tr = newState.tr; let modified = false; // @TODO: Iterate through transactions instead of descendants (?). newState.doc.descendants((node, pos, _parent) => { - const mutations = [handleGallery(node, tr, newState, pos)]; + const mutations = [ + replaceEmptyGalleryWithParagraph(node, tr, newState, pos), + ]; const shouldModify = mutations.some((bool) => bool === true); diff --git a/src/exports/styles/editor.js b/src/exports/styles/editor.js index 1155ae1b..406e2fee 100644 --- a/src/exports/styles/editor.js +++ b/src/exports/styles/editor.js @@ -45,7 +45,6 @@ export const hostStyles = css` color: var(--rhino-text-color); `; -// @TODO: Wire up a plugin to auto-write this. export const toolbarButtonStyles = css` .rhino-toolbar-button { border: 1px solid var(--rhino-border-color); @@ -123,27 +122,30 @@ export default css` } .toolbar::part(base) { - border: 1px solid var(--rhino-border-color); + border-color: var(--rhino-border-color); border-bottom-color: transparent; - border-radius: var(--rhino-border-radius) var(--rhino-border-radius) 0px 0px; + border-width: 1px; + border-radius: 4px; + border-bottom-right-radius: 0px; + border-bottom-left-radius: 0px; } - .toolbar::part(base):is(:focus-visible, :focus-within) { + .toolbar::part(base):is(:focus-within) { border-color: var(--rhino-button-active-border-color); outline: transparent; } - :host::part(toolbar__button--active), - :host::part(toolbar__button--active):is(:hover, :focus) { + [part~="toolbar__button--active"], + [part~="toolbar__button--active"]:is(:hover, :focus-within) { background-color: var(--rhino-button-active-background-color); } - :host::part(toolbar__button--link), - :host::part(toolbar__button--increase-indentation) { + [part~="toolbar__button--link"], + [part~="toolbar__button--increase-indentation"] { margin-inline-end: 1rem; } - :host::part(toolbar__button--attach-files) { + [part~="toolbar__button--attach-files"] { margin-inline-end: auto; } diff --git a/src/exports/styles/trix-core.css b/src/exports/styles/trix-core.css index ed761898..95d8ef40 100644 --- a/src/exports/styles/trix-core.css +++ b/src/exports/styles/trix-core.css @@ -167,6 +167,7 @@ .trix-content .attachment--preview { width: 100%; text-align: center; + margin: 0.6em 0; } .trix-content .attachment--preview .attachment__caption { color: #666; @@ -193,6 +194,16 @@ position: relative; } +/* This is a cheap easy way to allow us to show

tags in galleries */ +.trix-content .attachment-gallery > :not(.attachment, action-text-attachment) { + width: 0px; + padding: 0; + flex-basis: 0%; + max-width: 0%; + flex-shrink: 1; + flex-grow: 0; +} + .trix-content .attachment-gallery > :is(.attachment, action-text-attachment) { flex: 1 0 33%; padding: 0 0.5em; diff --git a/src/exports/styles/trix.css b/src/exports/styles/trix.css index 08fef3e1..243d599a 100644 --- a/src/exports/styles/trix.css +++ b/src/exports/styles/trix.css @@ -168,6 +168,7 @@ .trix-content .attachment--preview { width: 100%; text-align: center; + margin: 0.6em 0; } .trix-content .attachment--preview .attachment__caption { color: #666; @@ -194,6 +195,16 @@ position: relative; } +/* This is a cheap easy way to allow us to show

tags in galleries */ +.trix-content .attachment-gallery > :not(.attachment, action-text-attachment) { + width: 0px; + padding: 0; + flex-basis: 0%; + max-width: 0%; + flex-shrink: 1; + flex-grow: 0; +} + .trix-content .attachment-gallery > :is(.attachment, action-text-attachment) { flex: 1 0 33%; padding: 0 0.5em; diff --git a/tests/docs/specifying-accepted-file-types.test.js b/tests/docs/specifying-accepted-file-types.test.js index f3d5a396..9c89cc99 100644 --- a/tests/docs/specifying-accepted-file-types.test.js +++ b/tests/docs/specifying-accepted-file-types.test.js @@ -35,7 +35,7 @@ test("Should allow PNG files to be added via drag and drop", async ({ page }) => // Need to interact with the page before drag and drop works - await page.locator("rhino-editor#png-only").click() + await page.locator("rhino-editor#png-only .ProseMirror").click() // Drag and drop // https://github.com/microsoft/playwright/issues/13364#issuecomment-1156288428 // https://github.com/microsoft/playwright/issues/10667#issuecomment-998397241 @@ -47,7 +47,7 @@ test("Should allow PNG files to be added via drag and drop", async ({ page }) => fileType: "image/png", }); - await page.dispatchEvent('rhino-editor#png-only', 'drop', { dataTransfer }); + await page.dispatchEvent('rhino-editor#png-only .ProseMirror', 'drop', { dataTransfer, bubbles: true, composed: true, cancelable: true }); await expect(page.locator("rhino-editor#png-only figure")).toBeVisible() }) diff --git a/tests/unit/events.test.js b/tests/unit/events.test.js index c0b2711c..bf03616b 100644 --- a/tests/unit/events.test.js +++ b/tests/unit/events.test.js @@ -7,9 +7,6 @@ import sinon from "sinon" import {createDataTransfer} from "./helpers/create-data-transfer.js" import { createEditor } from "./helpers/create-editor.js"; -// "rhino-file-accept", "rhino-attachment-add", "rhino-attachment-remove", "rhino-paste", and "rhino-selection-change" are handled in the "specifying-accepted-file-types" / "index" tests -// due to it requiring playwright APIs. - const editorHTML = html`` test("rhino-before-initialize", async () => { @@ -118,6 +115,7 @@ test("rhino-attachment-add", async () => { const { rhinoEditor, tiptap } = await createEditor(editorHTML) rhinoEditor.addEventListener("rhino-attachment-add", handleEvent) + tiptap().click() tiptap().focus() assert.equal(spy.calledOnce, false) @@ -129,10 +127,11 @@ test("rhino-attachment-add", async () => { type: "image/png", }) - const dropEvent = new DragEvent("drop", { dataTransfer, bubbles: true }) + const dropEvent = new DragEvent("drop", { dataTransfer, bubbles: true, cancelable: true, composed: true }) - tiptap().dispatchEvent(dropEvent) + rhinoEditor.dispatchEvent(dropEvent) + await waitUntil(() => spy.calledOnce === true) assert.equal(spy.calledOnce, true) rhinoEditor.removeEventListener("rhino-attachment-add", handleEvent) @@ -179,13 +178,17 @@ test("rhino-attachment-remove", async () => { type: "image/png", }) - const dropEvent = new DragEvent("drop", { dataTransfer, bubbles: true }) + const dropEvent = new DragEvent("drop", { dataTransfer, bubbles: true, cancelable: true, composed: true }) - tiptap().dispatchEvent(dropEvent) + rhinoEditor.dispatchEvent(dropEvent) assert.equal(spy.calledOnce, false) - tiptap().querySelector("figure[data-trix-attachment]")?.remove() + const figure = () => tiptap().querySelector("figure[data-trix-attachment]") + await waitUntil(() => figure()) + + // @ts-expect-error + figure().remove() await waitUntil(() => spy.calledOnce) From a942226bcb9351a3a502a534f2e7a8e84ffc443d Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Mon, 11 Sep 2023 11:48:24 -0400 Subject: [PATCH 5/5] Version Packages (#107) Co-authored-by: github-actions[bot] --- .changeset/dry-walls-occur.md | 8 -------- .changeset/healthy-nails-shop.md | 6 ------ .changeset/kind-impalas-deliver.md | 5 ----- .changeset/loud-spoons-trade.md | 5 ----- .changeset/sour-beers-fix.md | 5 ----- .changeset/spotty-hats-hug.md | 5 ----- .changeset/swift-turtles-heal.md | 5 ----- .changeset/wicked-masks-impress.md | 5 ----- CHANGELOG.md | 20 ++++++++++++++++++++ package.json | 2 +- 10 files changed, 21 insertions(+), 45 deletions(-) delete mode 100644 .changeset/dry-walls-occur.md delete mode 100644 .changeset/healthy-nails-shop.md delete mode 100644 .changeset/kind-impalas-deliver.md delete mode 100644 .changeset/loud-spoons-trade.md delete mode 100644 .changeset/sour-beers-fix.md delete mode 100644 .changeset/spotty-hats-hug.md delete mode 100644 .changeset/swift-turtles-heal.md delete mode 100644 .changeset/wicked-masks-impress.md diff --git a/.changeset/dry-walls-occur.md b/.changeset/dry-walls-occur.md deleted file mode 100644 index 3faa3416..00000000 --- a/.changeset/dry-walls-occur.md +++ /dev/null @@ -1,8 +0,0 @@ ---- -"rhino-editor": patch ---- - -- The editor no longer inserts `

` tags above and below an attachment -- `

` now has a default margin of `0.6em 0` to align with Trix. -- Updated to role-components v2.0.1 -- Added docs on styling the border of the toolbar diff --git a/.changeset/healthy-nails-shop.md b/.changeset/healthy-nails-shop.md deleted file mode 100644 index 799bce67..00000000 --- a/.changeset/healthy-nails-shop.md +++ /dev/null @@ -1,6 +0,0 @@ ---- -"rhino-editor": minor ---- - -BREAKING_CHANGE: CSS parts have changed slightly to create a more consistent naming conventions. `toolbar-tooltip` has been renamed to `toolbar__tooltip` along with other parts being slightly modified. `link-dialog__add-link` changed to -`link-dialog__link`. diff --git a/.changeset/kind-impalas-deliver.md b/.changeset/kind-impalas-deliver.md deleted file mode 100644 index 72967ab7..00000000 --- a/.changeset/kind-impalas-deliver.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rhino-editor": patch ---- - -- Fixed CSS for attachment galleries diff --git a/.changeset/loud-spoons-trade.md b/.changeset/loud-spoons-trade.md deleted file mode 100644 index 161f18ae..00000000 --- a/.changeset/loud-spoons-trade.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rhino-editor": patch ---- - -- Added the ability to press the "Enter" key inside a `
` and end up on the next line. diff --git a/.changeset/sour-beers-fix.md b/.changeset/sour-beers-fix.md deleted file mode 100644 index 72c29102..00000000 --- a/.changeset/sour-beers-fix.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rhino-editor": patch ---- - -- Fixed a bug with dropcursor not showing diff --git a/.changeset/spotty-hats-hug.md b/.changeset/spotty-hats-hug.md deleted file mode 100644 index d130de6a..00000000 --- a/.changeset/spotty-hats-hug.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rhino-editor": minor ---- - -- BREAKING_CHANGE: `handleFiles` now no longer automatically chains events. Instead now it returns the attachmentManagers to be chained. diff --git a/.changeset/swift-turtles-heal.md b/.changeset/swift-turtles-heal.md deleted file mode 100644 index 105b44f8..00000000 --- a/.changeset/swift-turtles-heal.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rhino-editor": patch ---- - -Dependencies: update role-component to v2.0.0 diff --git a/.changeset/wicked-masks-impress.md b/.changeset/wicked-masks-impress.md deleted file mode 100644 index a58cc57d..00000000 --- a/.changeset/wicked-masks-impress.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"rhino-editor": patch ---- - -- Fixed a bug where pressing backspace inside a `
` or a Gallery would cause the attachment to no longer be in the gallery diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f38fa9f..4320268e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,25 @@ # Changelog +## 0.8.0 + +### Minor Changes + +- a315ebe: BREAKING_CHANGE: CSS parts have changed slightly to create a more consistent naming conventions. `toolbar-tooltip` has been renamed to `toolbar__tooltip` along with other parts being slightly modified. `link-dialog__add-link` changed to + `link-dialog__link`. +- a315ebe: - BREAKING_CHANGE: `handleFiles` now no longer automatically chains events. Instead now it returns the attachmentManagers to be chained. + +### Patch Changes + +- a315ebe: - The editor no longer inserts `

` tags above and below an attachment + - `

` now has a default margin of `0.6em 0` to align with Trix. + - Updated to role-components v2.0.1 + - Added docs on styling the border of the toolbar +- a315ebe: - Fixed CSS for attachment galleries +- a315ebe: - Added the ability to press the "Enter" key inside a `
` and end up on the next line. +- a315ebe: - Fixed a bug with dropcursor not showing +- 6190d0b: Dependencies: update role-component to v2.0.0 +- a315ebe: - Fixed a bug where pressing backspace inside a `
` or a Gallery would cause the attachment to no longer be in the gallery + ## 0.7.1 ### Patch Changes diff --git a/package.json b/package.json index a204a7b7..70f025ff 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rhino-editor", - "version": "0.7.1", + "version": "0.8.0", "description": "A custom element wrapped rich text editor", "type": "module", "main": "exports/index.js",