Skip to content

fix: Issues when editor is non-editable #783

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 5, 2024
Merged

fix: Issues when editor is non-editable #783

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a70f218
Fixed some issues when editor is non-editable
matthewlipski May 29, 2024
83933ab
Small typing fix
matthewlipski May 31, 2024
3bf9524
Added comment
matthewlipski Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/core/src/api/parsers/pasteExtension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ export const createPasteFromClipboardExtension = <
handleDOMEvents: {
paste(_view, event) {
event.preventDefault();

if (!editor.isEditable) {
return;
}

let format: (typeof acceptedMIMETypes)[number] | null = null;

for (const mimeType of acceptedMIMETypes) {
Expand Down
3 changes: 1 addition & 2 deletions packages/core/src/editor/Block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -279,15 +279,14 @@ NESTED BLOCKS
background-color: rgb(242, 241, 238);
border-radius: 4px;
color: rgb(125, 121, 122);
cursor: pointer;
display: flex;
flex-direction: row;
gap: 10px;
padding: 12px;
width: 100%;
}

[data-file-block] .bn-add-file-button:hover {
.bn-editor[contenteditable="true"] [data-file-block] .bn-add-file-button:hover {
background-color: rgb(225, 225, 225);
}

Expand Down
6 changes: 1 addition & 5 deletions packages/core/src/editor/BlockNoteEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,11 +194,7 @@ export class BlockNoteEditor<
ISchema,
SSchema
>;
public readonly filePanel?: FilePanelProsemirrorPlugin<
BSchema,
ISchema,
SSchema
>;
public readonly filePanel?: FilePanelProsemirrorPlugin<ISchema, SSchema>;
public readonly tableHandles?: TableHandlesProsemirrorPlugin<
ISchema,
SSchema
Expand Down
20 changes: 11 additions & 9 deletions packages/core/src/extensions/FilePanel/FilePanelPlugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import type { BlockNoteEditor } from "../../editor/BlockNoteEditor";
import { UiElementPosition } from "../../extensions-shared/UiElementPosition";
import type {
BlockFromConfig,
BlockSchema,
FileBlockConfig,
InlineContentSchema,
StyleSchema,
Expand All @@ -26,9 +25,12 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
public state?: FilePanelState<I, S>;
public emitUpdate: () => void;

public prevWasEditable: boolean | null = null;

constructor(
private readonly editor: BlockNoteEditor<
Record<string, FileBlockConfig>,
I,
S
>,
private readonly pluginKey: PluginKey,
private readonly pmView: EditorView,
emitUpdate: (state: FilePanelState<I, S>) => void
Expand Down Expand Up @@ -79,7 +81,7 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
block: BlockFromConfig<FileBlockConfig, I, S>;
} = this.pluginKey.getState(view.state);

if (!this.state?.show && pluginState.block) {
if (!this.state?.show && pluginState.block && this.editor.isEditable) {
const blockElement = document.querySelector(
`[data-node-type="blockContainer"][data-id="${pluginState.block.id}"]`
)!;
Expand All @@ -97,7 +99,8 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>

if (
!view.state.selection.eq(prevState.selection) ||
!view.state.doc.eq(prevState.doc)
!view.state.doc.eq(prevState.doc) ||
!this.editor.isEditable
) {
if (this.state?.show) {
this.state.show = false;
Expand Down Expand Up @@ -126,22 +129,21 @@ export class FilePanelView<I extends InlineContentSchema, S extends StyleSchema>
const filePanelPluginKey = new PluginKey("FilePanelPlugin");

export class FilePanelProsemirrorPlugin<
B extends BlockSchema,
I extends InlineContentSchema,
S extends StyleSchema
> extends EventEmitter<any> {
private view: FilePanelView<I, S> | undefined;
public readonly plugin: Plugin;

constructor(_editor: BlockNoteEditor<B, I, S>) {
constructor(editor: BlockNoteEditor<Record<string, FileBlockConfig>, I, S>) {
super();
this.plugin = new Plugin<{
block: BlockFromConfig<FileBlockConfig, I, S> | undefined;
}>({
key: filePanelPluginKey,
view: (editorView) => {
this.view = new FilePanelView(
// editor,
this.view = new FilePanelView<I, S>(
editor,
filePanelPluginKey,
editorView,
(state) => {
Expand Down
20 changes: 7 additions & 13 deletions packages/core/src/extensions/FormattingToolbar/FormattingToolbarPlugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ export class FormattingToolbarView implements PluginView {

public preventHide = false;
public preventShow = false;
public prevWasEditable: boolean | null = null;

public shouldShow: (props: {
view: EditorView;
Expand Down Expand Up @@ -93,16 +92,10 @@ export class FormattingToolbarView implements PluginView {
const isSame =
oldState && oldState.doc.eq(doc) && oldState.selection.eq(selection);

if (
(this.prevWasEditable === null ||
this.prevWasEditable === this.editor.isEditable) &&
(composing || isSame)
) {
if (composing || isSame) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we not need the editable checks here anymore?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just because the logic for checking that has been moved to the toolbar buttons, since the download file button, unlike all the others, needs to be rendered even when the editor isn't editable.

return;
}

this.prevWasEditable = this.editor.isEditable;

// support for CellSelections
const { ranges } = selection;
const from = Math.min(...ranges.map((range) => range.$from.pos));
Expand All @@ -116,11 +109,12 @@ export class FormattingToolbarView implements PluginView {
});

// Checks if menu should be shown/updated.
if (
this.editor.isEditable &&
!this.preventShow &&
(shouldShow || this.preventHide)
) {
if (!this.preventShow && (shouldShow || this.preventHide)) {
// Unlike other UI elements, we don't prevent the formatting toolbar from
// showing when the editor is not editable. This is because some buttons,
// e.g. the download file button, should still be accessible. Therefore,
// logic for hiding when the editor is non-editable is handled
// individually in each button.
this.state = {
show: true,
referencePos: this.getSelectionBoundingBox(),
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/FormattingToolbar/DefaultButtons/BasicTextStyleButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export const BasicTextStyleButton = <Style extends BasicTextStyle>(props: {
return !!selectedBlocks.find((block) => block.content !== undefined);
}, [basicTextStyleInSchema, selectedBlocks]);

if (!show) {
if (!show || !editor.isEditable) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we move the editable checks here? Doesn't it make more sense to make sure the entire formattingtoolbar is not shown?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately not for the tiny edge case of being able to download files while the editor is uneditable, which is done via the formatting toolbar

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmm, wouldn't it be cleaner then to make sure clicking the button downloads files in non-editable state? That saves a lot of logic in the buttons, as we can then just disable the formatting toolbar when non editable.

I also think that's semantically better, as for a "formatting toolbar" I'd expect I'd only be able to use it when I can actually edit / format the text.

wdyt?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

wouldn't it be cleaner then to make sure clicking the button downloads files in non-editable state?

Which button are you referring to, do you mean the default image preview? I would say that's a fair point but it complicates things for other types of file previews like images, videos, pdfs, etc. Especially with interactive previews, unless you have an in-built button to download the file, you can't really rely on just clicking the preview.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also r.e. semantics I agree, but I think the root issue of that is really having the download button in the formatting toolbar to begin with. I reckon at some point we will probably change to a file-specific menu for file blocks like Notion has.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. I still don't really like it, but agree there's not a better solution without significantly more effort. Let's go for this option for now. Can you add the reasoning (that and why we allow the formatting toolbar to show even when the editor is not editable, and that we instead do a per-button check) as a comment?

return null;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/FormattingToolbar/DefaultButtons/ColorStyleButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export const ColorStyleButton = () => {
return false;
}, [backgroundColorInSchema, selectedBlocks, textColorInSchema]);

if (!show) {
if (!show || !editor.isEditable) {
return null;
}

Expand Down
6 changes: 5 additions & 1 deletion packages/react/src/components/FormattingToolbar/DefaultButtons/CreateLinkButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,11 @@ export const CreateLinkButton = () => {
return true;
}, [linkInSchema, selectedBlocks]);

if (!show || !("link" in editor.schema.inlineContentSchema)) {
if (
!show ||
!("link" in editor.schema.inlineContentSchema) ||
!editor.isEditable
) {
return null;
}

Expand Down
6 changes: 5 additions & 1 deletion packages/react/src/components/FormattingToolbar/DefaultButtons/FileCaptionButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,11 @@ export const FileCaptionButton = () => {
[]
);

if (!fileBlock || checkBlockIsFileBlockWithPlaceholder(fileBlock, editor)) {
if (
!fileBlock ||
checkBlockIsFileBlockWithPlaceholder(fileBlock, editor) ||
!editor.isEditable
) {
return null;
}

Expand Down
6 changes: 5 additions & 1 deletion packages/react/src/components/FormattingToolbar/DefaultButtons/FileDeleteButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,11 @@ export const FileDeleteButton = () => {
editor.removeBlocks([fileBlock!]);
}, [editor, fileBlock]);

if (!fileBlock || checkBlockIsFileBlockWithPlaceholder(fileBlock, editor)) {
if (
!fileBlock ||
checkBlockIsFileBlockWithPlaceholder(fileBlock, editor) ||
!editor.isEditable
) {
return null;
}

Expand Down
6 changes: 5 additions & 1 deletion packages/react/src/components/FormattingToolbar/DefaultButtons/FilePreviewButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,11 @@ export const FilePreviewButton = () => {
}
}, [editor, fileBlock]);

if (!fileBlock || checkBlockIsFileBlockWithPlaceholder(fileBlock, editor)) {
if (
!fileBlock ||
checkBlockIsFileBlockWithPlaceholder(fileBlock, editor) ||
!editor.isEditable
) {
return null;
}

Expand Down
6 changes: 5 additions & 1 deletion packages/react/src/components/FormattingToolbar/DefaultButtons/FileRenameButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,11 @@ export const FileRenameButton = () => {
[]
);

if (!fileBlock || checkBlockIsFileBlockWithPlaceholder(fileBlock, editor)) {
if (
!fileBlock ||
checkBlockIsFileBlockWithPlaceholder(fileBlock, editor) ||
!editor.isEditable
) {
return null;
}

Expand Down
6 changes: 5 additions & 1 deletion packages/react/src/components/FormattingToolbar/DefaultButtons/FileReplaceButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,11 @@ export const FileReplaceButton = () => {

const block = selectedBlocks.length === 1 ? selectedBlocks[0] : undefined;

if (block === undefined || !checkBlockIsFileBlock(block, editor)) {
if (
block === undefined ||
!checkBlockIsFileBlock(block, editor) ||
!editor.isEditable
) {
return null;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/react/src/components/FormattingToolbar/DefaultButtons/NestBlockButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const NestBlockButton = () => {
);
}, [editor.schema.blockSchema, selectedBlocks]);

if (!show) {
if (!show || !editor.isEditable) {
return null;
}

Expand Down Expand Up @@ -92,7 +92,7 @@ export const UnnestBlockButton = () => {
);
}, [editor.schema.blockSchema, selectedBlocks]);

if (!show) {
if (!show || !editor.isEditable) {
return null;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/FormattingToolbar/DefaultButtons/TextAlignButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ export const TextAlignButton = (props: { textAlignment: TextAlignment }) => {
return !!selectedBlocks.find((block) => "textAlignment" in block.props);
}, [selectedBlocks]);

if (!show) {
if (!show || !editor.isEditable) {
return null;
}

Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/FormattingToolbar/DefaultSelects/BlockTypeSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export const BlockTypeSelect = (props: { items?: BlockTypeSelectItem[] }) => {
setBlock(editor.getTextCursorPosition().block);
}, editor);

if (!shouldShow) {
if (!shouldShow || !editor.isEditable) {
return null;
}

Expand Down