Skip to content

Commit

Permalink
feat: Add configurable block and inline styles for Tiptap (#51)
Browse files Browse the repository at this point in the history
  • Loading branch information
fsbraun authored Jan 6, 2025
1 parent 182fabf commit 25c019f
Show file tree
Hide file tree
Showing 7 changed files with 288 additions and 88 deletions.
12 changes: 9 additions & 3 deletions djangocms_text/editors.py
Original file line number Diff line number Diff line change
Expand Up @@ -320,6 +320,12 @@ def default(self, obj):
"Styles": {
"title": _("Styles"),
},
"InlineStyles": {
"title": _("Styles"),
},
"BlockStyles": {
"title": _("Blocks"),
},
"Font": {
"title": _("Font"),
},
Expand Down Expand Up @@ -367,7 +373,7 @@ def default(self, obj):
DEFAULT_TOOLBAR_CMS = [
["Undo", "Redo"],
["CMSPlugins", "cmswidget", "-", "ShowBlocks"],
["Format", "Styles"],
["Format", "Styles", "BlockStyles", "InlineStyles"],
["TextColor", "Highlight", "BGColor", "-", "PasteText", "PasteFromWord"],
["Maximize"],
[
Expand All @@ -393,7 +399,7 @@ def default(self, obj):
DEFAULT_TOOLBAR_HTMLField = [
["Undo", "Redo"],
["ShowBlocks"],
["Format", "Styles"],
["Format", "Styles", "BlockStyles", "InlineStyles"],
["TextColor", "Highlight", "BGColor", "-", "PasteText", "PasteFromWord"],
["Maximize"],
[
Expand Down Expand Up @@ -439,7 +445,7 @@ def __init__(
config: str,
js: Iterable[str] | None = None,
css: dict | None = None,
admin_css: dict | None = None,
admin_css: Iterable[str] | None = None,
inline_editing: bool = False,
child_plugin_support: bool = False,
):
Expand Down
8 changes: 6 additions & 2 deletions private/js/cms.tiptap.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import TableRow from '@tiptap/extension-table-row';
import {TextAlign, TextAlignOptions} from '@tiptap/extension-text-align';
import TiptapToolbar from "./tiptap_plugins/cms.tiptap.toolbar";

import {TextColor, Small, Var, Kbd, Samp, Highlight, InlineQuote} from "./tiptap_plugins/cms.styles";
import {TextColor, Highlight, InlineQuote, InlineStyle, BlockStyle} from "./tiptap_plugins/cms.styles";
import CmsFormExtension from "./tiptap_plugins/cms.formextension";
import CmsToolbarPlugin from "./tiptap_plugins/cms.toolbar";

Expand Down Expand Up @@ -49,7 +49,8 @@ class CMSTipTapPlugin {
TableHeader,
TableCell,
CmsDynLink,
Small, Var, Kbd, Samp, Highlight, InlineQuote,
Highlight, InlineQuote,
InlineStyle, BlockStyle,
TextAlign.configure({
types: ['heading', 'paragraph'],
}),
Expand Down Expand Up @@ -119,6 +120,9 @@ class CMSTipTapPlugin {
save_callback: save_callback,
settings: settings,
toolbar: options.toolbar || options.toolbar_HTMLField,
inlineStyles: options.inlineStyles,
blockStyles: options.blockStyles,
textColors: options.textColors,
separator_markup: this.separator_markup,
space_markup: this.space_markup,
});
Expand Down
1 change: 0 additions & 1 deletion private/js/tiptap_plugins/cms.dynlink.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ function DynLinkClickHandler(editor) {

const CmsDynLink = Link.extend({
addAttributes() {
'use strict';
return {
'data-cms-href': {
default: null
Expand Down
7 changes: 3 additions & 4 deletions private/js/tiptap_plugins/cms.plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,9 @@ TiptapToolbar.CMSPlugins.render = renderCmsPluginMenu;

// Common node properties for both inline and block nodes
const cmsPluginNodes = {
atom: true,
draggable: true,

addAttributes() {
'use strict';
return {
Expand All @@ -144,10 +147,6 @@ const cmsPluginNodes = {
};
},

atom: true,

draggable: true,

parseHTML() {
'use strict';
return [
Expand Down
Loading

0 comments on commit 25c019f

Please sign in to comment.