Skip to content

feat: Editor option to customize placeholders #503

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 7 commits into from
Mar 5, 2024
Merged

feat: Editor option to customize placeholders #503

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2984b36
Added option to customize placeholders
matthewlipski Jan 8, 2024
059e500
Slightly adjusted default placeholders
matthewlipski Jan 10, 2024
c025d05
check emptyness with css
YousefED Jan 24, 2024
e7c653b
Added editor options to customize placeholders via CSS
matthewlipski Jan 24, 2024
b03cbe5
Implemented PR feedback
matthewlipski Jan 26, 2024
d655e72
Merge branch 'refactor/playground-nextjs' into placeholder-changing
YousefED Mar 4, 2024
7ea500e
small placeholder fixes
YousefED Mar 4, 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
1 change: 0 additions & 1 deletion packages/core/src/editor/Block.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,7 +301,6 @@ NESTED BLOCKS
}

/* PLACEHOLDERS*/
/* TODO: Move to extension? */
.bn-inline-content:has(> .ProseMirror-trailingBreak):before {
/*float: left; */
pointer-events: none;
Expand Down
11 changes: 2 additions & 9 deletions packages/core/src/editor/BlockNoteEditor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,7 @@ export type BlockNoteEditorOptions<
// TODO: Figure out if enableBlockNoteExtensions/disableHistoryExtension are needed and document them.
enableBlockNoteExtensions: boolean;

placeholder: Record<
string | "default" | "addBlock",
| string
| {
placeholder: string;
mustBeFocused: boolean;
}
>;
placeholders: Record<string | "default", string>;

/**
*
Expand Down Expand Up @@ -311,7 +304,7 @@ export class BlockNoteEditor<

const extensions = getBlockNoteExtensions({
editor: this,
placeholder: newOptions.placeholder,
placeholders: newOptions.placeholders,
domAttributes: newOptions.domAttributes || {},
blockSchema: this.blockSchema,
blockSpecs: newOptions.blockSpecs,
Expand Down
13 changes: 3 additions & 10 deletions packages/core/src/editor/BlockNoteExtensions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,14 +39,7 @@ export const getBlockNoteExtensions = <
S extends StyleSchema
>(opts: {
editor: BlockNoteEditor<BSchema, I, S>;
placeholder?: Record<
string | "default" | "addBlock",
| string
| {
placeholder: string;
mustBeFocused: boolean;
}
>;
placeholders?: Record<string | "default", string>;
domAttributes: Partial<BlockNoteDOMAttributes>;
blockSchema: BSchema;
blockSpecs: BlockSpecs;
Expand Down Expand Up @@ -75,8 +68,8 @@ export const getBlockNoteExtensions = <
// DropCursor,
Placeholder.configure({
// TODO: This shorthand is kind of ugly
...(opts.placeholder !== undefined
? { placeholder: opts.placeholder }
...(opts.placeholders !== undefined
? { placeholders: opts.placeholders }
: {}),
}),
UniqueID.configure({
Expand Down
84 changes: 29 additions & 55 deletions packages/core/src/extensions/Placeholder/PlaceholderExtension.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { Extension } from "@tiptap/core";
import { Plugin, PluginKey } from "prosemirror-state";
import { Decoration, DecorationSet } from "prosemirror-view";
import { slashMenuPluginKey } from "../SlashMenu/SlashMenuPlugin";

const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);

Expand All @@ -13,54 +12,42 @@ const PLUGIN_KEY = new PluginKey(`blocknote-placeholder`);
*
*/
export interface PlaceholderOptions {
placeholder: Record<
string | "default" | "addBlock",
| string
| {
placeholder: string;
mustBeFocused: boolean;
}
>;
placeholders: Record<string | "default", string>;
}

export const Placeholder = Extension.create<PlaceholderOptions>({
export const Placeholder = Extension.create<
PlaceholderOptions,
{ styleEl: HTMLStyleElement }
>({
name: "placeholder",

addStorage() {
return {
styleEl: document.createElement("style"),
};
},

addOptions() {
return {
placeholder: {
placeholders: {
default: "Enter text or type '/' for commands",
addBlock: "Type to filter",
heading: {
placeholder: "Heading",
mustBeFocused: false,
},
bulletListItem: {
placeholder: "List",
mustBeFocused: false,
},
numberedListItem: {
placeholder: "List",
mustBeFocused: false,
},
heading: "Heading",
bulletListItem: "List",
numberedListItem: "List",
},
};
},

addProseMirrorPlugins() {
const styleEl = document.createElement("style");

// Append <style> element to <head>
onCreate() {
Copy link
Collaborator

Choose a reason for hiding this comment

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

can't we use the PM API for this instead of TipTap API? (we're trying this as a general rule right?)

const styleEl = this.storage.styleEl;
document.head.appendChild(styleEl);

// Grab style element's sheet
const styleSheet = styleEl.sheet!;

const getBaseSelector = (additionalSelectors = "") =>
`.bn-block-content${additionalSelectors} .bn-inline-content:has(> .ProseMirror-trailingBreak):before`;

const getSelector = (
blockType: string | "default" | "addBlock",
blockType: string | "default",
mustBeFocused = true
) => {
const mustBeFocusedSelector = mustBeFocused
Expand All @@ -71,26 +58,14 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
return getBaseSelector(mustBeFocusedSelector);
}

if (blockType === "addBlock") {
const addBlockSelector = "[data-is-filter]";
return getBaseSelector(addBlockSelector);
}

const blockTypeSelector = `[data-content-type="${blockType}"]`;
return getBaseSelector(mustBeFocusedSelector + blockTypeSelector);
};

for (const [blockType, placeholderRule] of Object.entries(
this.options.placeholder
for (const [blockType, placeholder] of Object.entries(
this.options.placeholders
)) {
const placeholder =
typeof placeholderRule === "string"
? placeholderRule
: placeholderRule.placeholder;
const mustBeFocused =
typeof placeholderRule === "string"
? true
: placeholderRule.mustBeFocused;
const mustBeFocused = blockType === "default";

styleSheet.insertRule(
`${getSelector(blockType, mustBeFocused)}{ content: "${placeholder}"; }`
Expand All @@ -106,7 +81,14 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
);
}
}
},

onDestroy() {
const styleEl = this.storage.styleEl;
document.head.removeChild(styleEl);
},

addProseMirrorPlugins() {
return [
new Plugin({
key: PLUGIN_KEY,
Expand All @@ -115,11 +97,6 @@ export const Placeholder = Extension.create<PlaceholderOptions>({
decorations: (state) => {
const { doc, selection } = state;

// TODO: fix slash menu ("type to filter")
const menuState = slashMenuPluginKey.getState(state);
const isFilter =
menuState?.triggerCharacter === "" && menuState?.active;

const active = this.editor.isEditable;

if (!active) {
Expand All @@ -139,11 +116,8 @@ export const Placeholder = Extension.create<PlaceholderOptions>({

const before = $pos.before();

const attr = isFilter
? "data-is-filter"
: "data-is-empty-and-focused";
const dec = Decoration.node(before, before + node.nodeSize, {
[attr]: "true",
"data-is-empty-and-focused": "true",
});

return DecorationSet.create(doc, [dec]);
Expand Down