def register_strikethrough_feature(features): """ Registering the `strikethrough` feature, which uses the `STRIKETHROUGH` Draft.js inline style type, and is stored as HTML with an `<s>` tag. """ feature_name = 'strikethrough' type_ = 'STRIKETHROUGH' tag = 's' control = { 'type': type_, 'label': 'S', 'description': 'Strikethrough', } features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { 'from_database_format': { tag: InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: tag } }, } features.register_converter_rule('contentstate', feature_name, db_conversion) features.default_features.append('strikethrough')
def register_code_styling(features): """Add <code> to richtext editor.""" feature_name = 'code' type_ = "CODE" tag = 'code' control = {'type': type_, 'label': '</>', 'description': 'Code'} features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { 'from_database_format': { tag: InlineStyleElementHandler(type_) }, 'to_database_format': { 'stylemap': { type_: { 'element': tag } } } } features.register_converter_rule('contentstate', feature_name, db_conversion) # register by default on all richtext editors features.default_features.append(feature_name)
def register_code_feature(features): """ Registering the `code` feature, which uses the `CODE` Draft.js inline style type, and is stored as HTML with an `<s>` tag. """ feature_name = 'code' type_ = 'CODE' tag = 'code' # 2. Configure how Draftail handles the feature in its toolbar. control = { 'type': type_, 'label': '</>', 'description': 'Code', # This isn’t even required – Draftail has predefined styles for STRIKETHROUGH. # 'style': {'textDecoration': 'line-through'}, } # 3. Call register_editor_plugin to register the configuration for Draftail. features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control) ) # 4.configure the content transform from the DB to the editor and back. db_conversion = { 'from_database_format': {tag: InlineStyleElementHandler(type_)}, 'to_database_format': {'style_map': {type_: tag}}, } # 5. Call register_converter_rule to register the content transformation conversion. features.register_converter_rule( 'contentstate', feature_name, db_conversion)
def register_lang_en_feature(features): languages = {'en': 'Angielski', 'pl': 'Polski'} for lang_code, lang_name in languages.items(): feature_name = f'lang-{lang_code}' type_ = f'LANG-{lang_code.upper()}' features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature({ 'type': type_, 'label': f'{lang_code.upper()}', 'description': lang_name, 'style': { 'fontStyle': "italic" }, })) features.register_converter_rule( 'contentstate', feature_name, { 'from_database_format': { f'span[lang={lang_code}]': InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: { 'element': 'span', 'props': { 'dir': 'ltr', 'lang': lang_code } } } }, }) features.default_features.append(feature_name)
def register_code_styling(features): """Add <code> to the rich text editor.""" feature_name = "code" type_ = "CODE" tag = "code" # <code> control = { # This is for inside draftail richtext editor. "type": type_, "label": "</>", "description": "Code" } features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { "from_database_format": { tag: InlineStyleElementHandler(type_) }, "to_database_format": { "style_map": { type_: { "element": tag } } } } features.register_converter_rule("contentstate", feature_name, db_conversion) # This will register this feature with all richtext editors by default. Optional. features.default_features.append(feature_name)
def register_codeline_feature(features): feature_name = 'Code Line' type_ = 'CODE' tag = 'code' control = { 'type': type_, 'label': '>_', 'description': 'Code Line', } features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { 'from_database_format': { tag: InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: tag } }, } features.register_converter_rule('contentstate', feature_name, db_conversion) features.default_features.append(feature_name)
def register_strikethrough_feature(features): """Register the `strikethrough` editor feature.""" feature_name = "strikethrough" type_ = "STRIKETHROUGH" tag = "s" control = { "type": type_, "icon": " fas fa-strikethrough", "description": gettext("Strikethrough"), } features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { "from_database_format": { tag: InlineStyleElementHandler(type_) }, "to_database_format": { "style_map": { type_: tag } }, } features.register_converter_rule("contentstate", feature_name, db_conversion)
def register_right_text_feature(features): """Выравнивание по правому краю в редакторе""" feature_name = "right" type_ = "RIGHTTEXT" control = { "type": type_, "label": "..::", "description": "Выравнивание справа", "style": { "display": "block", "text-align": "right", }, } features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { "from_database_format": { 'div[class="text-right"]': InlineStyleElementHandler(type_) }, "to_database_format": { "style_map": { type_: 'div class="text-right"' } } } features.register_converter_rule("contentstate", feature_name, db_conversion) features.default_features.append(feature_name)
def register_code_styling(features): """Add the <code> to the richtext editor and page.""" feature_name = "code" type_ = "PRE" tag = "pre" control = {"type": type_, "label": "</>", "description": "Code"} features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { "from_database_format": { tag: InlineStyleElementHandler(type_) }, "to_database_format": { "style_map": { type_: { "element": tag } } } } features.register_converter_rule("contentstate", feature_name, db_conversion) features.default_features.append(feature_name)
def register_quote_feature(features): feature_name = 'quote' type_ = 'quote' tag = 'quote' control = { 'type': type_, 'label': '❝', 'description': 'Inlinequote', 'style': {'background-color': 'yellow'} } features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control) ) db_conversion = { 'from_database_format': { tag: html_to_contentstate.InlineStyleElementHandler(type_) }, 'to_database_format': {'style_map': {type_: tag}}, } features.register_converter_rule( 'contentstate', feature_name, db_conversion) features.default_features.append('quote')
def register_rich_text_paragraph_heading(features): feature_name = 'paragraph_heading' type_ = 'HEADING' control = { 'type': type_, 'label': 'Heading', 'description': 'Paragraph Heading', 'element': 'h2', } features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control, )) features.register_converter_rule( 'contentstate', feature_name, { 'from_database_format': { 'h2[class=paragraph-heading]': InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: { 'element': 'h2', 'props': { 'class': 'paragraph-heading' } } } }, })
def register_superscript_feature(features): feature_name = 'superscript' type_ = 'SUPERSCRIPT' tag = 'sup' control = { 'type': type_, 'icon': 'fa-superscript', 'description': 'Superscript', } features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { 'from_database_format': { tag: InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: tag } }, } features.default_features.append(feature_name) features.register_converter_rule('contentstate', feature_name, db_conversion)
def register_mark_feature(features): """ add monospace font to editor toolbar """ feature_name = "code" type_ = "CODE" tag = "mark" control = { "type": type_, "label": "☆", "description": "Code", } features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { "from_database_format": { tag: InlineStyleElementHandler(type_) }, "to_database_format": { "style_map": { type_: tag } }, } features.register_converter_rule("contentstate", feature_name, db_conversion) features.default_features.append("code")
def register_code_styling(features): # step1 feature_name = "" type_ = "CODE" tag = "code" # step 2 control = {"type": type_, "label": "</>", "description": "code"} # step3 features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) # step 4 db_conversion = { "from_database_format": { tag: InlineStyleElementHandler(type_) }, "to_database_format": { "style_map": { type_: { "element": tag } } } } # step 5 features.register_converter_rule("contentstate", feature_name, db_conversion) # step 6 # this will register this features with all rich_text editor by default features.default_features.append(feature_name)
def register_underline_feature(features): """ Registering the `underline` feature, which uses the `UNDERLINE` Draft.js inline style type, and is stored as HTML with an `<s>` tag. """ feature_name = 'underline' type_ = 'UNDERLINE' tag = 'u' control = { 'type': type_, 'label': '_', 'description': 'Underline', } features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { 'from_database_format': { tag: InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: tag } }, } features.register_converter_rule('contentstate', feature_name, db_conversion) features.default_features.append('underline')
def register_mark_feature(features): tag = "latex-inline" control = { "type": tag, "label": "TeX", "description": "Inline LaTeX", "element": "span", "style": { "font-family": "monospace", "background-color": "#CCC" } } features.register_editor_plugin( "draftail", tag, draftail_features.InlineStyleFeature(control)) db_conversion = { "from_database_format": { "span[class=mathjax]": InlineStyleElementHandler(tag) }, "to_database_format": { "style_map": { tag: { "element": "span", "props": { "class": "mathjax" } } } }, } features.register_converter_rule("contentstate", tag, db_conversion) features.default_features.append(tag)
def register_rich_text_underline(features): feature_name = 'underline' type_ = 'UNDERLINE' control = { 'type': type_, 'label': 'U', 'description': 'underline', 'element': 'span', } features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control, )) features.register_converter_rule( 'contentstate', feature_name, { 'from_database_format': { 'span[class=underline]': InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: { 'element': 'span', 'props': { 'class': 'underline' } } } }, })
def register_center_feature(features): feature_name = "center" type_ = "CENTERTEXT" tag = "div" control = { "type": type_, "label": "Center", "description": "Center text", "style": { "display": "block", "text-align": "center", }, } features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control) ) db_conversion = { "from_database_format": {tag: InlineStyleElementHandler(type_)}, "to_database_format": { "style_map": { type_: {"element": tag, "props": {"class": "d-block text-center"}} } }, } features.register_converter_rule("contentstate", feature_name, db_conversion) features.default_features.append(feature_name)
def register_large_feature(features): """ Registering the 'large' Draftail feature which adds a span around the selected text with its class set to 'body-large' """ # 1. Set up variables for use below feature_name = 'large' type_ = 'LARGE' # 2. Set up a dictionary to pass to Draftail to configure # how it handles this feature in its toolbar. # The 'style' attribute controls how Draftail formats that text # in the editor - does not affect the final rendered HTML # In this case, I am adding similar formatting to what # the CSS will do to that 'small-caption' class in the template control = { 'type': type_, 'label': 'L', 'description': 'Large body text', 'style': { 'font-size': '125%' } } # 3. Call register_editor_plugin to register the configuration for Draftail. features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control) ) # 4.configure the content transform from the DB to the editor and back. # The "From" version uses a CSS selector to find spans with a class of 'body-large' # The "To" version adds a span with a class of 'body-large' surrounding the selected text db_conversion = { 'from_database_format': { 'span[class="body-large"]': InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': {type_: 'span class="body-large"'} }, } # 5. Call register_converter_rule to register the content transformation conversion. features.register_converter_rule( 'contentstate', feature_name, db_conversion ) # 6. (optional) Add the feature to the default features list to make it available # on rich text fields that do not specify an explicit 'features' list features.default_features.append('large')
def register_justify_feature(features): """ Registering the `text-justify` feature. """ f_name, type_, control, db_format = register_text_align_feature('justify') features.register_editor_plugin( 'draftail', f_name, draftail_features.InlineStyleFeature(control)) features.register_converter_rule('contentstate', f_name, db_format) features.default_features.append('text-justify')
def register_accent_feature(features): """ Registering the 'smallcaption' Draftail feature which adds a span around the selected text with its class set to 'small-caption' """ # 1. Set up variables for use below feature_name = "accent" type_ = "ACCENT" # 2. Set up a dictionary to pass to Draftail to configure # how it handles this feature in its toolbar. # The 'style' attribute controls how Draftail formats that text # in the editor - does not affect the final rendered HTML # In this case, I am adding similar formatting to what # the CSS will do to that 'small-caption' class in the template control = { "type": type_, "label": "AC", "description": "Accent Color", "style": { "font-size": "150%", "color": "#DD0B7A" }, } # 3. Register the configuration for Draftail to know about. # This makes it available to add to editing toolbars, # but the RichTextField(features=[]) list has to include it to # actually make it appear in the toolbar features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) # 4.configure the content transform # from the DB to the editor and back. # The "From" version uses a CSS selector to find spans with # a class of 'small-caption' # The "To" version adds a span with a class of 'small-caption' # surrounding the selected text db_conversion = { "from_database_format": { 'span[class="accent"]': InlineStyleElementHandler(type_) }, "to_database_format": { "style_map": { type_: 'span class="accent"' } }, } # 5. Call register_converter_rule to register # the content transformation conversion rule with Draftail features.register_converter_rule("contentstate", feature_name, db_conversion) features.default_features.append("accent")
def register_smallcaption_feature(features): """ Registering the 'smallcaption' Draftail feature which adds a span around the selected text with its class set to 'small-caption' """ # 1. Set up variables for use below feature_name = 'smallcaption' type_ = 'SMALLCAPTION' # 2. Set up a dictionary to pass to Draftail to configure # how it handles this feature in its toolbar. # The 'style' attribute controls how Draftail formats that text # in the editor - does not affect the final rendered HTML # In this case, I am adding similar formatting to what # the CSS will do to that 'small-caption' class in the template control = { 'type': type_, 'label': 'SC', 'description': 'Small Caption', 'style': { 'font-size': '75%', 'color': '#666' } } # 3. Register the configuration for Draftail to know about. # This makes it available to add to editing toolbars, # but the RichTextField(features=[]) list has to include it to # actually make it appear in the toolbar features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control)) # 4.configure the content transform # from the DB to the editor and back. # The "From" version uses a CSS selector to find spans with # a class of 'small-caption' # The "To" version adds a span with a class of 'small-caption' # surrounding the selected text db_conversion = { 'from_database_format': { 'span[class="small-caption"]': InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: 'span class="small-caption"' } }, } # 5. Call register_converter_rule to register # the content transformation conversion rule with Draftail features.register_converter_rule('contentstate', feature_name, db_conversion)
def register_keyboard_key_styling(features): """Add <div style="text-align:center;"></div> to code""" # Step one - define variables feature_name = "keybrdkey" # the name of this feature type_ = "KEYBOARD_KEY" # what it's called like in the DB tag = "kbd" # the HTML Tag coming out of this # Step 2 - create control reference for Draftail control = { "type": type_, "label": "тМи", "description": "Keyboard key", "style": { # some CSS -- Draftail only! "background-color": "black", "color": "white", }, "class": ("badge", "badge-primary", ), } # Step 3 - add control reference to Draftail features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) # Step 4 - tell DB how our style should be mapped db_conversion = { "from_database_format": { tag: InlineStyleElementHandler(type_), }, "to_database_format": { "style_map": { type_: { "element": tag, "props": { "class": "", "style": "", } } } } } # Step 5: Add mapping to DB features.register_converter_rule("contentstate", feature_name, db_conversion) # Step 6 (Optional): Register Feature with all rich text editors by default features.default_features.append(feature_name)
def register_color_feature(name, colour, features): feature_name = get_feature_name(name) type_ = get_feature_name_upper(name) tag = 'span' control = {'type': type_, 'icon': get_setting('ICON')} is_classname = colour.startswith('.') if is_classname: colour = colour[1:] detection = '%s[class="%s"]' control['class'] = colour editor_colors = get_setting('EDITOR_COLOURS') editor_color = editor_colors.get(name, "#00f") control['style'] = {'color': editor_color} props = {'class': colour} else: detection = '%s[style="color: %s;"]' control['style'] = {'color': colour} props = { 'style': { 'color': colour, } } control['description'] = colour detection = detection % (tag, colour) features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control)) features.register_converter_rule( 'contentstate', feature_name, { 'from_database_format': { detection: InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: { 'element': tag, 'props': props } }, }, }) features.default_features.append(feature_name)
def register_centertext_feature(features): """Creates centered text in our richtext editor and page.""" # Step 1 feature_name = "center" type_ = "CENTERTEXT" tag = "div" # Step 2 control = { "type": type_, "label": "Center", "description": "Center Text", "style": { "display": "block", "text-align": "center", }, } # Step 3 features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) # Step 4 db_conversion = { "from_database_format": { tag: InlineStyleElementHandler(type_) }, "to_database_format": { "style_map": { type_: { "element": tag, "props": { "class": "d-block text-center" } } } } } # Step 5 features.register_converter_rule("contentstate", feature_name, db_conversion) # Step 6, This is optional. features.default_features.append(feature_name)
def register_center_text_styling(features): """Add <div style="text-align:center;"></div> to code""" # Step one - define variables feature_name = "center" # the name of this feature type_ = "CENTER_TEXT" # what it's called like in the DB tag = "div" # the HTML Tag coming out of this # Step 2 - create control reference for Draftail control = { "type": type_, "label": "Center", "description": "Centered text", "style": { # some CSS -- Draftail only! "display": "block", "text-align": "center", }, } # Step 3 - add control reference to Draftail features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) # Step 4 - tell DB how our style should be mapped db_conversion = { "from_database_format": { tag: InlineStyleElementHandler(type_), }, "to_database_format": { "style_map": { type_: { "element": tag, "props": { "class": "d-block text-center", "style": "", } } } } } # Step 5: Add mapping to DB features.register_converter_rule("contentstate", feature_name, db_conversion) # Step 6 (Optional): Register Feature with all rich text editors by default features.default_features.append(feature_name)
def register_strikethrough_feature(features): """ Registering the `strikethrough` feature, which uses the `STRIKETHROUGH` Draft.js inline style type, and is stored as HTML with an `<s>` tag. """ feature_name = 'strikethrough' type_ = 'STRIKETHROUGH' tag = 's' # 2. Configure how Draftail handles the feature in its toolbar. control = { 'type': type_, 'icon': 'fas fa-strikethrough', 'description': 'Strikethrough', 'style': { 'textDecoration': 'line-through' }, #'style': {'textDecoration': 'line-through'}, # This isn’t even required – Draftail has predefined styles for STRIKETHROUGH. # 'style': {'textDecoration': 'line-through'}, } # 3. Call register_editor_plugin to register the configuration for Draftail. features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control)) # 4.configure the content transform from the DB to the editor and back. db_conversion = { 'from_database_format': { tag: InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: tag } }, } # 5. Call register_converter_rule to register the content transformation conversion. features.register_converter_rule('contentstate', feature_name, db_conversion) # 6. (optional) Add the feature to the default features list to make it available # on rich text fields that do not specify an explicit 'features' list features.default_features.append('strikethrough')
def register_custom_style_feature(features): feature_name = 'purple' type_ = feature_name.upper() tag = 'span' detection = '{tag}[class="{feature_name}"]'.format( tag=tag, feature_name=feature_name) control = { 'type': type_, 'description': 'Purple Color', # This should be an svg which will occupy a 1024x1024 viewbox 'icon': ['M100 100 H 900 V 900 H 100 Z'], 'label': 'purple', # .purple is the class which is defined in draft-colors.css . It is necessary to get this style working. 'style': { 'color': 'purple' }, } features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { 'from_database_format': { detection: InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: { 'element': tag, 'props': { 'class': feature_name } } } }, } features.register_converter_rule('contentstate', feature_name, db_conversion) features.default_features.append(feature_name)
def register_centertext_feature(features): """Важная фраза""" feature_name = "incut" type_ = "INCUT" tag = "div" control = { "type": type_, "label": "<!!>", "description": "Важная фраза", "element": "em", "style": { "display": "block", "text-align": "center", "font-size": "20px", "background-color": "gray" }, } features.register_editor_plugin( "draftail", feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { "from_database_format": { tag: InlineStyleElementHandler(type_) }, "to_database_format": { "style_map": { type_: { "element": tag, "props": { "class": "incut" } } } } } features.register_converter_rule("contentstate", feature_name, db_conversion) features.default_features.append(feature_name)
def register_strikethrough_feature(features): """ Registering the `strikethrough` feature, which uses the `STRIKETHROUGH` Draft.js inline style type, and is stored as HTML with an `<s>` tag. """ feature_name = 'strikethrough' type_ = 'STRIKETHROUGH' tag = 's' control = { 'type': type_, 'label': 'S', # TODO # 'icon': 'icon icon-fa-strikethrough', # 'icon': ['M100 100 H 900 V 900 H 100 Z'], 'description': ugettext('Strikethrough'), # This isn’t even required – Draftail has predefined styles for STRIKETHROUGH. # 'style': {'textDecoration': 'line-through'}, } # features.default_features.append(feature_name) features.register_editor_plugin( 'draftail', feature_name, draftail_features.InlineStyleFeature(control)) db_conversion = { 'from_database_format': { tag: InlineStyleElementHandler(type_) }, 'to_database_format': { 'style_map': { type_: tag } }, } features.register_converter_rule('contentstate', feature_name, db_conversion) features.register_converter_rule('editorhtml', feature_name, [ WhitelistRule(feature_name, allow_without_attributes), ])