Repository files navigation

DraftJS Utils

An collection of useful utility functions for DraftJS.

I have been using DraftJS in few of my projects. DraftJS is very nice library for creating editors. I wrote a couple of utility functions for myself which I can re-use across my projects. They are well tested. I am open-sourcing them so that others can also leverage. Many of the functions described use ImmutableJS.

Installing

npm install draftjs-utils

Methods

Method NameParametersReturn TypeDescription
1getSelectedBlocksMapEditorStateOrderedMapThe function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is ContentBlock.
2getSelectedBlocksListEditorStateListThe function will return an Immutable List of currently selected Blocks. The data type of returned objects is ContentBlock.
3getSelectedBlockEditorStateContentBlockThe function will return first of currently selected Blocks, this is more useful when we expect user to select only one Block. The data type of returned object is ContentBlock.
4getAllBlocksEditorStateListThe function will return all the Blocks of the editor. The data type of returned objects is ContentBlock.
5getSelectedBlocksTypeEditorStatestringThe function will return the type of currently selected Blocks. The type is a simple string. It will return undefined if not all selected Blocks have same type.
6removeSelectedBlocksStyleEditorStateEditorStateThe function will reset the type of selected Blocks to unstyled.
7getSelectionTextEditorStatestringThe function will return plain text of current selection.
8addLineBreakRemovingSelectionEditorStateEditorStateThe function will replace currently selected text with a \n.
9insertNewUnstyledBlockEditorStateEditorStateThe function will add a new unstyled Block and copy current selection to it.
10clearEditorContentEditorStateEditorStateThe function will clear all content from the Editor.
11getSelectionInlineStyleEditorStateobjectThe function will return inline style applicable to current selection. The function will return only those styles that are applicable to whole selection.
12getSelectionEntityEditorStateEntityThe function will return the Entity of current selection. Entity can not span multiple Blocks, method will check only first selected Block.
13getEntityRangeEditorState, entityKeyobjectThe function will return the range of given Entity in currently selected Block. Entity can not span multiple Blocks, method will check only first selected Block.
14handleNewLineEditorStateEditorState, EventThe function will handle newline event in editor gracefully, it will insert \n for soft-new lines and remove selected text if any.
15isListBlockContentBlockbooleanThe function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'.
16changeDepthEditorState , adjustment, maxDepthEditorStateChange the depth of selected Blocks by adjustment if its less than maxdepth.

License

MIT.

About

Collection of useful utility functions for DraftJS.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Repository files navigation

DraftJS Utils

An collection of useful utility functions for DraftJS.

I have been using DraftJS in few of my projects. DraftJS is very nice library for creating editors. I wrote a couple of utility functions for myself which I can re-use across my projects. They are well tested. I am open-sourcing them so that others can also leverage. Many of the functions described use ImmutableJS.

Installing

npm install draftjs-utils

Methods

Method NameParametersReturn TypeDescription
1getSelectedBlocksMapEditorStateOrderedMapThe function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is ContentBlock.
2getSelectedBlocksListEditorStateListThe function will return an Immutable List of currently selected Blocks. The data type of returned objects is ContentBlock.
3getSelectedBlockEditorStateContentBlockThe function will return first of currently selected Blocks, this is more useful when we expect user to select only one Block. The data type of returned object is ContentBlock.
4getAllBlocksEditorStateListThe function will return all the Blocks of the editor. The data type of returned objects is ContentBlock.
5getSelectedBlocksTypeEditorStatestringThe function will return the type of currently selected Blocks. The type is a simple string. It will return undefined if not all selected Blocks have same type.
6removeSelectedBlocksStyleEditorStateEditorStateThe function will reset the type of selected Blocks to unstyled.
7getSelectionTextEditorStatestringThe function will return plain text of current selection.
8addLineBreakRemovingSelectionEditorStateEditorStateThe function will replace currently selected text with a \n.
9insertNewUnstyledBlockEditorStateEditorStateThe function will add a new unstyled Block and copy current selection to it.
10clearEditorContentEditorStateEditorStateThe function will clear all content from the Editor.
11getSelectionInlineStyleEditorStateobjectThe function will return inline style applicable to current selection. The function will return only those styles that are applicable to whole selection.
12getSelectionEntityEditorStateEntityThe function will return the Entity of current selection. Entity can not span multiple Blocks, method will check only first selected Block.
13getEntityRangeEditorState, entityKeyobjectThe function will return the range of given Entity in currently selected Block. Entity can not span multiple Blocks, method will check only first selected Block.
14handleNewLineEditorStateEditorState, EventThe function will handle newline event in editor gracefully, it will insert \n for soft-new lines and remove selected text if any.
15isListBlockContentBlockbooleanThe function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'.
16changeDepthEditorState , adjustment, maxDepthEditorStateChange the depth of selected Blocks by adjustment if its less than maxdepth.

License

MIT.

About

Collection of useful utility functions for DraftJS.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

DraftJS Utils

An collection of useful utility functions for DraftJS.

I have been using DraftJS in few of my projects. DraftJS is very nice library for creating editors. I wrote a couple of utility functions for myself which I can re-use across my projects. They are well tested. I am open-sourcing them so that others can also leverage. Many of the functions described use ImmutableJS.

Installing

npm install draftjs-utils

Methods

Method NameParametersReturn TypeDescription
1getSelectedBlocksMapEditorStateOrderedMapThe function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is ContentBlock.
2getSelectedBlocksListEditorStateListThe function will return an Immutable List of currently selected Blocks. The data type of returned objects is ContentBlock.
3getSelectedBlockEditorStateContentBlockThe function will return first of currently selected Blocks, this is more useful when we expect user to select only one Block. The data type of returned object is ContentBlock.
4getAllBlocksEditorStateListThe function will return all the Blocks of the editor. The data type of returned objects is ContentBlock.
5getSelectedBlocksTypeEditorStatestringThe function will return the type of currently selected Blocks. The type is a simple string. It will return undefined if not all selected Blocks have same type.
6removeSelectedBlocksStyleEditorStateEditorStateThe function will reset the type of selected Blocks to unstyled.
7getSelectionTextEditorStatestringThe function will return plain text of current selection.
8addLineBreakRemovingSelectionEditorStateEditorStateThe function will replace currently selected text with a \n.
9insertNewUnstyledBlockEditorStateEditorStateThe function will add a new unstyled Block and copy current selection to it.
10clearEditorContentEditorStateEditorStateThe function will clear all content from the Editor.
11getSelectionInlineStyleEditorStateobjectThe function will return inline style applicable to current selection. The function will return only those styles that are applicable to whole selection.
12getSelectionEntityEditorStateEntityThe function will return the Entity of current selection. Entity can not span multiple Blocks, method will check only first selected Block.
13getEntityRangeEditorState, entityKeyobjectThe function will return the range of given Entity in currently selected Block. Entity can not span multiple Blocks, method will check only first selected Block.
14handleNewLineEditorStateEditorState, EventThe function will handle newline event in editor gracefully, it will insert \n for soft-new lines and remove selected text if any.
15isListBlockContentBlockbooleanThe function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'.
16changeDepthEditorState , adjustment, maxDepthEditorStateChange the depth of selected Blocks by adjustment if its less than maxdepth.

License

MIT.

About

Collection of useful utility functions for DraftJS.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

DraftJS Utils

An collection of useful utility functions for DraftJS.

I have been using DraftJS in few of my projects. DraftJS is very nice library for creating editors. I wrote a couple of utility functions for myself which I can re-use across my projects. They are well tested. I am open-sourcing them so that others can also leverage. Many of the functions described use ImmutableJS.

Installing

npm install draftjs-utils

Methods

Method NameParametersReturn TypeDescription
1getSelectedBlocksMapEditorStateOrderedMapThe function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is ContentBlock.
2getSelectedBlocksListEditorStateListThe function will return an Immutable List of currently selected Blocks. The data type of returned objects is ContentBlock.
3getSelectedBlockEditorStateContentBlockThe function will return first of currently selected Blocks, this is more useful when we expect user to select only one Block. The data type of returned object is ContentBlock.
4getAllBlocksEditorStateListThe function will return all the Blocks of the editor. The data type of returned objects is ContentBlock.
5getSelectedBlocksTypeEditorStatestringThe function will return the type of currently selected Blocks. The type is a simple string. It will return undefined if not all selected Blocks have same type.
6removeSelectedBlocksStyleEditorStateEditorStateThe function will reset the type of selected Blocks to unstyled.
7getSelectionTextEditorStatestringThe function will return plain text of current selection.
8addLineBreakRemovingSelectionEditorStateEditorStateThe function will replace currently selected text with a \n.
9insertNewUnstyledBlockEditorStateEditorStateThe function will add a new unstyled Block and copy current selection to it.
10clearEditorContentEditorStateEditorStateThe function will clear all content from the Editor.
11getSelectionInlineStyleEditorStateobjectThe function will return inline style applicable to current selection. The function will return only those styles that are applicable to whole selection.
12getSelectionEntityEditorStateEntityThe function will return the Entity of current selection. Entity can not span multiple Blocks, method will check only first selected Block.
13getEntityRangeEditorState, entityKeyobjectThe function will return the range of given Entity in currently selected Block. Entity can not span multiple Blocks, method will check only first selected Block.
14handleNewLineEditorStateEditorState, EventThe function will handle newline event in editor gracefully, it will insert \n for soft-new lines and remove selected text if any.
15isListBlockContentBlockbooleanThe function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'.
16changeDepthEditorState , adjustment, maxDepthEditorStateChange the depth of selected Blocks by adjustment if its less than maxdepth.

License

MIT.

About

Collection of useful utility functions for DraftJS.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Repository files navigation

DraftJS Utils

An collection of useful utility functions for DraftJS.

I have been using DraftJS in few of my projects. DraftJS is very nice library for creating editors. I wrote a couple of utility functions for myself which I can re-use across my projects. They are well tested. I am open-sourcing them so that others can also leverage. Many of the functions described use ImmutableJS.

Installing

npm install draftjs-utils

Methods

Method NameParametersReturn TypeDescription
1getSelectedBlocksMapEditorStateOrderedMapThe function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is ContentBlock.
2getSelectedBlocksListEditorStateListThe function will return an Immutable List of currently selected Blocks. The data type of returned objects is ContentBlock.
3getSelectedBlockEditorStateContentBlockThe function will return first of currently selected Blocks, this is more useful when we expect user to select only one Block. The data type of returned object is ContentBlock.
4getAllBlocksEditorStateListThe function will return all the Blocks of the editor. The data type of returned objects is ContentBlock.
5getSelectedBlocksTypeEditorStatestringThe function will return the type of currently selected Blocks. The type is a simple string. It will return undefined if not all selected Blocks have same type.
6removeSelectedBlocksStyleEditorStateEditorStateThe function will reset the type of selected Blocks to unstyled.
7getSelectionTextEditorStatestringThe function will return plain text of current selection.
8addLineBreakRemovingSelectionEditorStateEditorStateThe function will replace currently selected text with a \n.
9insertNewUnstyledBlockEditorStateEditorStateThe function will add a new unstyled Block and copy current selection to it.
10clearEditorContentEditorStateEditorStateThe function will clear all content from the Editor.
11getSelectionInlineStyleEditorStateobjectThe function will return inline style applicable to current selection. The function will return only those styles that are applicable to whole selection.
12getSelectionEntityEditorStateEntityThe function will return the Entity of current selection. Entity can not span multiple Blocks, method will check only first selected Block.
13getEntityRangeEditorState, entityKeyobjectThe function will return the range of given Entity in currently selected Block. Entity can not span multiple Blocks, method will check only first selected Block.
14handleNewLineEditorStateEditorState, EventThe function will handle newline event in editor gracefully, it will insert \n for soft-new lines and remove selected text if any.
15isListBlockContentBlockbooleanThe function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'.
16changeDepthEditorState , adjustment, maxDepthEditorStateChange the depth of selected Blocks by adjustment if its less than maxdepth.

License

MIT.

About

Collection of useful utility functions for DraftJS.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

DraftJS Utils

An collection of useful utility functions for DraftJS.

I have been using DraftJS in few of my projects. DraftJS is very nice library for creating editors. I wrote a couple of utility functions for myself which I can re-use across my projects. They are well tested. I am open-sourcing them so that others can also leverage. Many of the functions described use ImmutableJS.

Installing

npm install draftjs-utils

Methods

Method NameParametersReturn TypeDescription
1getSelectedBlocksMapEditorStateOrderedMapThe function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is ContentBlock.
2getSelectedBlocksListEditorStateListThe function will return an Immutable List of currently selected Blocks. The data type of returned objects is ContentBlock.
3getSelectedBlockEditorStateContentBlockThe function will return first of currently selected Blocks, this is more useful when we expect user to select only one Block. The data type of returned object is ContentBlock.
4getAllBlocksEditorStateListThe function will return all the Blocks of the editor. The data type of returned objects is ContentBlock.
5getSelectedBlocksTypeEditorStatestringThe function will return the type of currently selected Blocks. The type is a simple string. It will return undefined if not all selected Blocks have same type.
6removeSelectedBlocksStyleEditorStateEditorStateThe function will reset the type of selected Blocks to unstyled.
7getSelectionTextEditorStatestringThe function will return plain text of current selection.
8addLineBreakRemovingSelectionEditorStateEditorStateThe function will replace currently selected text with a \n.
9insertNewUnstyledBlockEditorStateEditorStateThe function will add a new unstyled Block and copy current selection to it.
10clearEditorContentEditorStateEditorStateThe function will clear all content from the Editor.
11getSelectionInlineStyleEditorStateobjectThe function will return inline style applicable to current selection. The function will return only those styles that are applicable to whole selection.
12getSelectionEntityEditorStateEntityThe function will return the Entity of current selection. Entity can not span multiple Blocks, method will check only first selected Block.
13getEntityRangeEditorState, entityKeyobjectThe function will return the range of given Entity in currently selected Block. Entity can not span multiple Blocks, method will check only first selected Block.
14handleNewLineEditorStateEditorState, EventThe function will handle newline event in editor gracefully, it will insert \n for soft-new lines and remove selected text if any.
15isListBlockContentBlockbooleanThe function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'.
16changeDepthEditorState , adjustment, maxDepthEditorStateChange the depth of selected Blocks by adjustment if its less than maxdepth.

License

MIT.

About

Collection of useful utility functions for DraftJS.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

DraftJS Utils

An collection of useful utility functions for DraftJS.

I have been using DraftJS in few of my projects. DraftJS is very nice library for creating editors. I wrote a couple of utility functions for myself which I can re-use across my projects. They are well tested. I am open-sourcing them so that others can also leverage. Many of the functions described use ImmutableJS.

Installing

npm install draftjs-utils

Methods

Method NameParametersReturn TypeDescription
1getSelectedBlocksMapEditorStateOrderedMapThe function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is ContentBlock.
2getSelectedBlocksListEditorStateListThe function will return an Immutable List of currently selected Blocks. The data type of returned objects is ContentBlock.
3getSelectedBlockEditorStateContentBlockThe function will return first of currently selected Blocks, this is more useful when we expect user to select only one Block. The data type of returned object is ContentBlock.
4getAllBlocksEditorStateListThe function will return all the Blocks of the editor. The data type of returned objects is ContentBlock.
5getSelectedBlocksTypeEditorStatestringThe function will return the type of currently selected Blocks. The type is a simple string. It will return undefined if not all selected Blocks have same type.
6removeSelectedBlocksStyleEditorStateEditorStateThe function will reset the type of selected Blocks to unstyled.
7getSelectionTextEditorStatestringThe function will return plain text of current selection.
8addLineBreakRemovingSelectionEditorStateEditorStateThe function will replace currently selected text with a \n.
9insertNewUnstyledBlockEditorStateEditorStateThe function will add a new unstyled Block and copy current selection to it.
10clearEditorContentEditorStateEditorStateThe function will clear all content from the Editor.
11getSelectionInlineStyleEditorStateobjectThe function will return inline style applicable to current selection. The function will return only those styles that are applicable to whole selection.
12getSelectionEntityEditorStateEntityThe function will return the Entity of current selection. Entity can not span multiple Blocks, method will check only first selected Block.
13getEntityRangeEditorState, entityKeyobjectThe function will return the range of given Entity in currently selected Block. Entity can not span multiple Blocks, method will check only first selected Block.
14handleNewLineEditorStateEditorState, EventThe function will handle newline event in editor gracefully, it will insert \n for soft-new lines and remove selected text if any.
15isListBlockContentBlockbooleanThe function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'.
16changeDepthEditorState , adjustment, maxDepthEditorStateChange the depth of selected Blocks by adjustment if its less than maxdepth.

License

MIT.

About

Collection of useful utility functions for DraftJS.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Repository files navigation

DraftJS Utils

An collection of useful utility functions for DraftJS.

I have been using DraftJS in few of my projects. DraftJS is very nice library for creating editors. I wrote a couple of utility functions for myself which I can re-use across my projects. They are well tested. I am open-sourcing them so that others can also leverage. Many of the functions described use ImmutableJS.

Installing

npm install draftjs-utils

Methods

Method NameParametersReturn TypeDescription
1getSelectedBlocksMapEditorStateOrderedMapThe function will return an Immutable OrderedMap of currently selected Blocks. The key is key of Block and value is ContentBlock.
2getSelectedBlocksListEditorStateListThe function will return an Immutable List of currently selected Blocks. The data type of returned objects is ContentBlock.
3getSelectedBlockEditorStateContentBlockThe function will return first of currently selected Blocks, this is more useful when we expect user to select only one Block. The data type of returned object is ContentBlock.
4getAllBlocksEditorStateListThe function will return all the Blocks of the editor. The data type of returned objects is ContentBlock.
5getSelectedBlocksTypeEditorStatestringThe function will return the type of currently selected Blocks. The type is a simple string. It will return undefined if not all selected Blocks have same type.
6removeSelectedBlocksStyleEditorStateEditorStateThe function will reset the type of selected Blocks to unstyled.
7getSelectionTextEditorStatestringThe function will return plain text of current selection.
8addLineBreakRemovingSelectionEditorStateEditorStateThe function will replace currently selected text with a \n.
9insertNewUnstyledBlockEditorStateEditorStateThe function will add a new unstyled Block and copy current selection to it.
10clearEditorContentEditorStateEditorStateThe function will clear all content from the Editor.
11getSelectionInlineStyleEditorStateobjectThe function will return inline style applicable to current selection. The function will return only those styles that are applicable to whole selection.
12getSelectionEntityEditorStateEntityThe function will return the Entity of current selection. Entity can not span multiple Blocks, method will check only first selected Block.
13getEntityRangeEditorState, entityKeyobjectThe function will return the range of given Entity in currently selected Block. Entity can not span multiple Blocks, method will check only first selected Block.
14handleNewLineEditorStateEditorState, EventThe function will handle newline event in editor gracefully, it will insert \n for soft-new lines and remove selected text if any.
15isListBlockContentBlockbooleanThe function will return true is type of block is 'unordered-list-item' or 'ordered-list-item'.
16changeDepthEditorState , adjustment, maxDepthEditorStateChange the depth of selected Blocks by adjustment if its less than maxdepth.

License

MIT.

About

Collection of useful utility functions for DraftJS.

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages