BranchesTags

Repository files navigation

Simpla Text

Build statusSizeVersionPublished

Simpla-text is an element containing editable richtext, which you can update seamlessly inline on your page. Use it on its own or inside other textual elements. It's built on the Simpla content system.

<simpla-textpath="/text"></simpla-text>

Contents

Resources

Installation and setup

Install simpla-text with Bower (Yarn support coming soon)

$ bower i simpla-text --save

Setup Simpla on your page, then import simpla-text into your <head>

<linkrel="import" href="/bower_components/simpla-text/simpla-text.html">

Use <simpla-text> wherever you want editable text on your page. Give each text element a unique path, where it will store its content in your project

<simpla-textpath="/text"></simpla-text>

Editing content

Edit text by entering edit mode with Simpla, or setting the editable property directly on an element.

// Enter edit modeSimpla.editable(true);
<!-- Make only this text editable --><simpla-textpath="/text" editable></simpla-text>

Entering edit mode is the recommended way to edit text. It ensures all elements on a page remain in sync and updates Simpla's public editable state, which other elements may rely on.

Saving content

Save simpla-text content by calling Simpla's save() method, which will save all modified content on the page. It returns a promise.

// Save all modified Simpla contentSimpla.save();

You must be authenticated with Simpla before saving content

Inline content

You can use <simpla-text> either as a standalone text container, or inside other textual elements (headings, paragraphs, etc). When used inside other textual elements, simpla-text automatically enables inline mode, which disables paragraphs and inserts line breaks for new lines.

<!-- Standalone text container, uses paragraphs --><simpla-textpath="/text"></simpla-text><!-- Inline content, line breaks only --><h1><simpla-textpath="/text"></simpla-text></h1>

You can also force inline mode by setting the inline property on simpla-text

<!-- Inline content, line breaks only --><simpla-textpath="/text" inline></simpla-text>

Initializing with static content

You can write HTML content inside simpla-text just like you would with any other element. The HTML you insert will be parsed into simpla-text's content model when you enter edit mode. If content for a text's path exists on Simpla's API any static content will be overwritten.

<simpla-textpath="/text"><p>Simpla text is a block of editable richtext for the Simpla content system</p></simpla-text>

Initializing with static content is useful for converting existing sites to Simpla, or bootstrapping a project with predefined content. By putting content inside <simpla-text> and then calling Simpla.save() you can easily set content directly to Simpla's API.

Since static content is overwritten by remote data, you should not have content inside <simpla-text> in production. If newer content gets saved you will experience FOUC (Flash Of Unformatted Content) when the static content is overwritten

Plaintext

By default simpla-text provides editable richtext, with basic formatting controls (bold, italic, underline, links) available to the user. You can disable all formatting tools and force simpla-text to create plain text content only with the plaintext property.

<simpla-textpath="/text" plaintext></simpla-text>

Custom placeholders

You can set custom placeholders (displayed when simpla-text is editable and doesn't have content) with a placeholder attribute

<simpla-textpath="/text" placeholder="Start typing..."></simpla-text>

Typographer

Simpla-text applies 'smart typography' rules to its content, including:

  • Smart quotes (" to “)
  • Automatic em dashes (-- to —)
  • Automatic ellipses (... to …)

You can disable the typographer by giving simpla-text a noTypographer property

<simpla-textpath="/text" no-typographer></simpla-text>

Readonly

Simpla-text has a readonly property that stops the element from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-text to purely consume and display content from Simpla's API.

<simpla-textpath="/text" readonly></simpla-text>

Contributing

If you find any issues with simpla-text please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.

MIT © Simpla

About

An editable richtext element you can update inline

www.simplajs.org

Topics

content-managementeditorjavascriptpolymerrichtexteditorsimplatextweb-components

Resources

Readme
MIT license
Activity
Custom properties

Stars

11 stars

Watchers

3 watching

Forks

3 forks
Report repository

Releases

Packages

Used by

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
BranchesTags
Repository files navigation
Simpla Text
Build statusSizeVersionPublished
Simpla-text is an element containing editable richtext, which you can update seamlessly inline on your page. Use it on its own or inside other textual elements. It's built on the Simpla content system.
<simpla-textpath="/text"></simpla-text>
Contents
Resources
Installation and setup
Install simpla-text with Bower (Yarn support coming soon)
$ bower i simpla-text --save
Setup Simpla on your page, then import simpla-text into your <head>
<linkrel="import" href="/bower_components/simpla-text/simpla-text.html">
Use <simpla-text> wherever you want editable text on your page. Give each text element a unique path, where it will store its content in your project
<simpla-textpath="/text"></simpla-text>
Editing content
Edit text by entering edit mode with Simpla, or setting the editable property directly on an element.
// Enter edit modeSimpla.editable(true);
<!-- Make only this text editable --><simpla-textpath="/text" editable></simpla-text>
Entering edit mode is the recommended way to edit text. It ensures all elements on a page remain in sync and updates Simpla's public editable state, which other elements may rely on.
Saving content
Save simpla-text content by calling Simpla's save() method, which will save all modified content on the page. It returns a promise.
// Save all modified Simpla contentSimpla.save();
You must be authenticated with Simpla before saving content
Inline content
You can use <simpla-text> either as a standalone text container, or inside other textual elements (headings, paragraphs, etc). When used inside other textual elements, simpla-text automatically enables inline mode, which disables paragraphs and inserts line breaks for new lines.
<!-- Standalone text container, uses paragraphs --><simpla-textpath="/text"></simpla-text><!-- Inline content, line breaks only --><h1><simpla-textpath="/text"></simpla-text></h1>
You can also force inline mode by setting the inline property on simpla-text
<!-- Inline content, line breaks only --><simpla-textpath="/text" inline></simpla-text>
Initializing with static content
You can write HTML content inside simpla-text just like you would with any other element. The HTML you insert will be parsed into simpla-text's content model when you enter edit mode. If content for a text's path exists on Simpla's API any static content will be overwritten.
<simpla-textpath="/text"><p>Simpla text is a block of editable richtext for the Simpla content system</p></simpla-text>
Initializing with static content is useful for converting existing sites to Simpla, or bootstrapping a project with predefined content. By putting content inside <simpla-text> and then calling Simpla.save() you can easily set content directly to Simpla's API.
Since static content is overwritten by remote data, you should not have content inside <simpla-text> in production. If newer content gets saved you will experience FOUC (Flash Of Unformatted Content) when the static content is overwritten
Plaintext
By default simpla-text provides editable richtext, with basic formatting controls (bold, italic, underline, links) available to the user. You can disable all formatting tools and force simpla-text to create plain text content only with the plaintext property.
<simpla-textpath="/text" plaintext></simpla-text>
Custom placeholders
You can set custom placeholders (displayed when simpla-text is editable and doesn't have content) with a placeholder attribute
<simpla-textpath="/text" placeholder="Start typing..."></simpla-text>
Typographer
Simpla-text applies 'smart typography' rules to its content, including:
  • Smart quotes (" to “)
  • Automatic em dashes (-- to —)
  • Automatic ellipses (... to …)
You can disable the typographer by giving simpla-text a noTypographer property
<simpla-textpath="/text" no-typographer></simpla-text>
Readonly
Simpla-text has a readonly property that stops the element from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-text to purely consume and display content from Simpla's API.
<simpla-textpath="/text" readonly></simpla-text>
Contributing
If you find any issues with simpla-text please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.
MIT © Simpla
About
An editable richtext element you can update inline
www.simplajs.org
Topics
content-managementeditorjavascriptpolymerrichtexteditorsimplatextweb-components
Resources
Readme
MIT license
Activity
Custom properties
Stars
11 stars
Watchers
3 watching
Forks
3 forks
Report repository
Releases
Packages
Used by
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
BranchesTags
Repository files navigation
Simpla Text
Build statusSizeVersionPublished
Simpla-text is an element containing editable richtext, which you can update seamlessly inline on your page. Use it on its own or inside other textual elements. It's built on the Simpla content system.
<simpla-textpath="/text"></simpla-text>
Contents
Resources
Installation and setup
Install simpla-text with Bower (Yarn support coming soon)
$ bower i simpla-text --save
Setup Simpla on your page, then import simpla-text into your <head>
<linkrel="import" href="/bower_components/simpla-text/simpla-text.html">
Use <simpla-text> wherever you want editable text on your page. Give each text element a unique path, where it will store its content in your project
<simpla-textpath="/text"></simpla-text>
Editing content
Edit text by entering edit mode with Simpla, or setting the editable property directly on an element.
// Enter edit modeSimpla.editable(true);
<!-- Make only this text editable --><simpla-textpath="/text" editable></simpla-text>
Entering edit mode is the recommended way to edit text. It ensures all elements on a page remain in sync and updates Simpla's public editable state, which other elements may rely on.
Saving content
Save simpla-text content by calling Simpla's save() method, which will save all modified content on the page. It returns a promise.
// Save all modified Simpla contentSimpla.save();
You must be authenticated with Simpla before saving content
Inline content
You can use <simpla-text> either as a standalone text container, or inside other textual elements (headings, paragraphs, etc). When used inside other textual elements, simpla-text automatically enables inline mode, which disables paragraphs and inserts line breaks for new lines.
<!-- Standalone text container, uses paragraphs --><simpla-textpath="/text"></simpla-text><!-- Inline content, line breaks only --><h1><simpla-textpath="/text"></simpla-text></h1>
You can also force inline mode by setting the inline property on simpla-text
<!-- Inline content, line breaks only --><simpla-textpath="/text" inline></simpla-text>
Initializing with static content
You can write HTML content inside simpla-text just like you would with any other element. The HTML you insert will be parsed into simpla-text's content model when you enter edit mode. If content for a text's path exists on Simpla's API any static content will be overwritten.
<simpla-textpath="/text"><p>Simpla text is a block of editable richtext for the Simpla content system</p></simpla-text>
Initializing with static content is useful for converting existing sites to Simpla, or bootstrapping a project with predefined content. By putting content inside <simpla-text> and then calling Simpla.save() you can easily set content directly to Simpla's API.
Since static content is overwritten by remote data, you should not have content inside <simpla-text> in production. If newer content gets saved you will experience FOUC (Flash Of Unformatted Content) when the static content is overwritten
Plaintext
By default simpla-text provides editable richtext, with basic formatting controls (bold, italic, underline, links) available to the user. You can disable all formatting tools and force simpla-text to create plain text content only with the plaintext property.
<simpla-textpath="/text" plaintext></simpla-text>
Custom placeholders
You can set custom placeholders (displayed when simpla-text is editable and doesn't have content) with a placeholder attribute
<simpla-textpath="/text" placeholder="Start typing..."></simpla-text>
Typographer
Simpla-text applies 'smart typography' rules to its content, including:
  • Smart quotes (" to “)
  • Automatic em dashes (-- to —)
  • Automatic ellipses (... to …)
You can disable the typographer by giving simpla-text a noTypographer property
<simpla-textpath="/text" no-typographer></simpla-text>
Readonly
Simpla-text has a readonly property that stops the element from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-text to purely consume and display content from Simpla's API.
<simpla-textpath="/text" readonly></simpla-text>
Contributing
If you find any issues with simpla-text please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.
MIT © Simpla
About
An editable richtext element you can update inline
www.simplajs.org
Topics
content-managementeditorjavascriptpolymerrichtexteditorsimplatextweb-components
Resources
Readme
MIT license
Activity
Custom properties
Stars
11 stars
Watchers
3 watching
Forks
3 forks
Report repository
Releases
Packages
Used by
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
BranchesTags
Repository files navigation
Simpla Text
Build statusSizeVersionPublished
Simpla-text is an element containing editable richtext, which you can update seamlessly inline on your page. Use it on its own or inside other textual elements. It's built on the Simpla content system.
<simpla-textpath="/text"></simpla-text>
Contents
Resources
Installation and setup
Install simpla-text with Bower (Yarn support coming soon)
$ bower i simpla-text --save
Setup Simpla on your page, then import simpla-text into your <head>
<linkrel="import" href="/bower_components/simpla-text/simpla-text.html">
Use <simpla-text> wherever you want editable text on your page. Give each text element a unique path, where it will store its content in your project
<simpla-textpath="/text"></simpla-text>
Editing content
Edit text by entering edit mode with Simpla, or setting the editable property directly on an element.
// Enter edit modeSimpla.editable(true);
<!-- Make only this text editable --><simpla-textpath="/text" editable></simpla-text>
Entering edit mode is the recommended way to edit text. It ensures all elements on a page remain in sync and updates Simpla's public editable state, which other elements may rely on.
Saving content
Save simpla-text content by calling Simpla's save() method, which will save all modified content on the page. It returns a promise.
// Save all modified Simpla contentSimpla.save();
You must be authenticated with Simpla before saving content
Inline content
You can use <simpla-text> either as a standalone text container, or inside other textual elements (headings, paragraphs, etc). When used inside other textual elements, simpla-text automatically enables inline mode, which disables paragraphs and inserts line breaks for new lines.
<!-- Standalone text container, uses paragraphs --><simpla-textpath="/text"></simpla-text><!-- Inline content, line breaks only --><h1><simpla-textpath="/text"></simpla-text></h1>
You can also force inline mode by setting the inline property on simpla-text
<!-- Inline content, line breaks only --><simpla-textpath="/text" inline></simpla-text>
Initializing with static content
You can write HTML content inside simpla-text just like you would with any other element. The HTML you insert will be parsed into simpla-text's content model when you enter edit mode. If content for a text's path exists on Simpla's API any static content will be overwritten.
<simpla-textpath="/text"><p>Simpla text is a block of editable richtext for the Simpla content system</p></simpla-text>
Initializing with static content is useful for converting existing sites to Simpla, or bootstrapping a project with predefined content. By putting content inside <simpla-text> and then calling Simpla.save() you can easily set content directly to Simpla's API.
Since static content is overwritten by remote data, you should not have content inside <simpla-text> in production. If newer content gets saved you will experience FOUC (Flash Of Unformatted Content) when the static content is overwritten
Plaintext
By default simpla-text provides editable richtext, with basic formatting controls (bold, italic, underline, links) available to the user. You can disable all formatting tools and force simpla-text to create plain text content only with the plaintext property.
<simpla-textpath="/text" plaintext></simpla-text>
Custom placeholders
You can set custom placeholders (displayed when simpla-text is editable and doesn't have content) with a placeholder attribute
<simpla-textpath="/text" placeholder="Start typing..."></simpla-text>
Typographer
Simpla-text applies 'smart typography' rules to its content, including:
  • Smart quotes (" to “)
  • Automatic em dashes (-- to —)
  • Automatic ellipses (... to …)
You can disable the typographer by giving simpla-text a noTypographer property
<simpla-textpath="/text" no-typographer></simpla-text>
Readonly
Simpla-text has a readonly property that stops the element from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-text to purely consume and display content from Simpla's API.
<simpla-textpath="/text" readonly></simpla-text>
Contributing
If you find any issues with simpla-text please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.
MIT © Simpla
About
An editable richtext element you can update inline
www.simplajs.org
Topics
content-managementeditorjavascriptpolymerrichtexteditorsimplatextweb-components
Resources
Readme
MIT license
Activity
Custom properties
Stars
11 stars
Watchers
3 watching
Forks
3 forks
Report repository
Releases
Packages
Used by
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
BranchesTags
Repository files navigation
Simpla Text
Build statusSizeVersionPublished
Simpla-text is an element containing editable richtext, which you can update seamlessly inline on your page. Use it on its own or inside other textual elements. It's built on the Simpla content system.
<simpla-textpath="/text"></simpla-text>
Contents
Resources
Installation and setup
Install simpla-text with Bower (Yarn support coming soon)
$ bower i simpla-text --save
Setup Simpla on your page, then import simpla-text into your <head>
<linkrel="import" href="/bower_components/simpla-text/simpla-text.html">
Use <simpla-text> wherever you want editable text on your page. Give each text element a unique path, where it will store its content in your project
<simpla-textpath="/text"></simpla-text>
Editing content
Edit text by entering edit mode with Simpla, or setting the editable property directly on an element.
// Enter edit modeSimpla.editable(true);
<!-- Make only this text editable --><simpla-textpath="/text" editable></simpla-text>
Entering edit mode is the recommended way to edit text. It ensures all elements on a page remain in sync and updates Simpla's public editable state, which other elements may rely on.
Saving content
Save simpla-text content by calling Simpla's save() method, which will save all modified content on the page. It returns a promise.
// Save all modified Simpla contentSimpla.save();
You must be authenticated with Simpla before saving content
Inline content
You can use <simpla-text> either as a standalone text container, or inside other textual elements (headings, paragraphs, etc). When used inside other textual elements, simpla-text automatically enables inline mode, which disables paragraphs and inserts line breaks for new lines.
<!-- Standalone text container, uses paragraphs --><simpla-textpath="/text"></simpla-text><!-- Inline content, line breaks only --><h1><simpla-textpath="/text"></simpla-text></h1>
You can also force inline mode by setting the inline property on simpla-text
<!-- Inline content, line breaks only --><simpla-textpath="/text" inline></simpla-text>
Initializing with static content
You can write HTML content inside simpla-text just like you would with any other element. The HTML you insert will be parsed into simpla-text's content model when you enter edit mode. If content for a text's path exists on Simpla's API any static content will be overwritten.
<simpla-textpath="/text"><p>Simpla text is a block of editable richtext for the Simpla content system</p></simpla-text>
Initializing with static content is useful for converting existing sites to Simpla, or bootstrapping a project with predefined content. By putting content inside <simpla-text> and then calling Simpla.save() you can easily set content directly to Simpla's API.
Since static content is overwritten by remote data, you should not have content inside <simpla-text> in production. If newer content gets saved you will experience FOUC (Flash Of Unformatted Content) when the static content is overwritten
Plaintext
By default simpla-text provides editable richtext, with basic formatting controls (bold, italic, underline, links) available to the user. You can disable all formatting tools and force simpla-text to create plain text content only with the plaintext property.
<simpla-textpath="/text" plaintext></simpla-text>
Custom placeholders
You can set custom placeholders (displayed when simpla-text is editable and doesn't have content) with a placeholder attribute
<simpla-textpath="/text" placeholder="Start typing..."></simpla-text>
Typographer
Simpla-text applies 'smart typography' rules to its content, including:
  • Smart quotes (" to “)
  • Automatic em dashes (-- to —)
  • Automatic ellipses (... to …)
You can disable the typographer by giving simpla-text a noTypographer property
<simpla-textpath="/text" no-typographer></simpla-text>
Readonly
Simpla-text has a readonly property that stops the element from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-text to purely consume and display content from Simpla's API.
<simpla-textpath="/text" readonly></simpla-text>
Contributing
If you find any issues with simpla-text please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.
MIT © Simpla
About
An editable richtext element you can update inline
www.simplajs.org
Topics
content-managementeditorjavascriptpolymerrichtexteditorsimplatextweb-components
Resources
Readme
MIT license
Activity
Custom properties
Stars
11 stars
Watchers
3 watching
Forks
3 forks
Report repository
Releases
Packages
Used by
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
BranchesTags
Repository files navigation
Simpla Text
Build statusSizeVersionPublished
Simpla-text is an element containing editable richtext, which you can update seamlessly inline on your page. Use it on its own or inside other textual elements. It's built on the Simpla content system.
<simpla-textpath="/text"></simpla-text>
Contents
Resources
Installation and setup
Install simpla-text with Bower (Yarn support coming soon)
$ bower i simpla-text --save
Setup Simpla on your page, then import simpla-text into your <head>
<linkrel="import" href="/bower_components/simpla-text/simpla-text.html">
Use <simpla-text> wherever you want editable text on your page. Give each text element a unique path, where it will store its content in your project
<simpla-textpath="/text"></simpla-text>
Editing content
Edit text by entering edit mode with Simpla, or setting the editable property directly on an element.
// Enter edit modeSimpla.editable(true);
<!-- Make only this text editable --><simpla-textpath="/text" editable></simpla-text>
Entering edit mode is the recommended way to edit text. It ensures all elements on a page remain in sync and updates Simpla's public editable state, which other elements may rely on.
Saving content
Save simpla-text content by calling Simpla's save() method, which will save all modified content on the page. It returns a promise.
// Save all modified Simpla contentSimpla.save();
You must be authenticated with Simpla before saving content
Inline content
You can use <simpla-text> either as a standalone text container, or inside other textual elements (headings, paragraphs, etc). When used inside other textual elements, simpla-text automatically enables inline mode, which disables paragraphs and inserts line breaks for new lines.
<!-- Standalone text container, uses paragraphs --><simpla-textpath="/text"></simpla-text><!-- Inline content, line breaks only --><h1><simpla-textpath="/text"></simpla-text></h1>
You can also force inline mode by setting the inline property on simpla-text
<!-- Inline content, line breaks only --><simpla-textpath="/text" inline></simpla-text>
Initializing with static content
You can write HTML content inside simpla-text just like you would with any other element. The HTML you insert will be parsed into simpla-text's content model when you enter edit mode. If content for a text's path exists on Simpla's API any static content will be overwritten.
<simpla-textpath="/text"><p>Simpla text is a block of editable richtext for the Simpla content system</p></simpla-text>
Initializing with static content is useful for converting existing sites to Simpla, or bootstrapping a project with predefined content. By putting content inside <simpla-text> and then calling Simpla.save() you can easily set content directly to Simpla's API.
Since static content is overwritten by remote data, you should not have content inside <simpla-text> in production. If newer content gets saved you will experience FOUC (Flash Of Unformatted Content) when the static content is overwritten
Plaintext
By default simpla-text provides editable richtext, with basic formatting controls (bold, italic, underline, links) available to the user. You can disable all formatting tools and force simpla-text to create plain text content only with the plaintext property.
<simpla-textpath="/text" plaintext></simpla-text>
Custom placeholders
You can set custom placeholders (displayed when simpla-text is editable and doesn't have content) with a placeholder attribute
<simpla-textpath="/text" placeholder="Start typing..."></simpla-text>
Typographer
Simpla-text applies 'smart typography' rules to its content, including:
  • Smart quotes (" to “)
  • Automatic em dashes (-- to —)
  • Automatic ellipses (... to …)
You can disable the typographer by giving simpla-text a noTypographer property
<simpla-textpath="/text" no-typographer></simpla-text>
Readonly
Simpla-text has a readonly property that stops the element from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-text to purely consume and display content from Simpla's API.
<simpla-textpath="/text" readonly></simpla-text>
Contributing
If you find any issues with simpla-text please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.
MIT © Simpla
About
An editable richtext element you can update inline
www.simplajs.org
Topics
content-managementeditorjavascriptpolymerrichtexteditorsimplatextweb-components
Resources
Readme
MIT license
Activity
Custom properties
Stars
11 stars
Watchers
3 watching
Forks
3 forks
Report repository
Releases
Packages
Used by
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
BranchesTags
Repository files navigation
Simpla Text
Build statusSizeVersionPublished
Simpla-text is an element containing editable richtext, which you can update seamlessly inline on your page. Use it on its own or inside other textual elements. It's built on the Simpla content system.
<simpla-textpath="/text"></simpla-text>
Contents
Resources
Installation and setup
Install simpla-text with Bower (Yarn support coming soon)
$ bower i simpla-text --save
Setup Simpla on your page, then import simpla-text into your <head>
<linkrel="import" href="/bower_components/simpla-text/simpla-text.html">
Use <simpla-text> wherever you want editable text on your page. Give each text element a unique path, where it will store its content in your project
<simpla-textpath="/text"></simpla-text>
Editing content
Edit text by entering edit mode with Simpla, or setting the editable property directly on an element.
// Enter edit modeSimpla.editable(true);
<!-- Make only this text editable --><simpla-textpath="/text" editable></simpla-text>
Entering edit mode is the recommended way to edit text. It ensures all elements on a page remain in sync and updates Simpla's public editable state, which other elements may rely on.
Saving content
Save simpla-text content by calling Simpla's save() method, which will save all modified content on the page. It returns a promise.
// Save all modified Simpla contentSimpla.save();
You must be authenticated with Simpla before saving content
Inline content
You can use <simpla-text> either as a standalone text container, or inside other textual elements (headings, paragraphs, etc). When used inside other textual elements, simpla-text automatically enables inline mode, which disables paragraphs and inserts line breaks for new lines.
<!-- Standalone text container, uses paragraphs --><simpla-textpath="/text"></simpla-text><!-- Inline content, line breaks only --><h1><simpla-textpath="/text"></simpla-text></h1>
You can also force inline mode by setting the inline property on simpla-text
<!-- Inline content, line breaks only --><simpla-textpath="/text" inline></simpla-text>
Initializing with static content
You can write HTML content inside simpla-text just like you would with any other element. The HTML you insert will be parsed into simpla-text's content model when you enter edit mode. If content for a text's path exists on Simpla's API any static content will be overwritten.
<simpla-textpath="/text"><p>Simpla text is a block of editable richtext for the Simpla content system</p></simpla-text>
Initializing with static content is useful for converting existing sites to Simpla, or bootstrapping a project with predefined content. By putting content inside <simpla-text> and then calling Simpla.save() you can easily set content directly to Simpla's API.
Since static content is overwritten by remote data, you should not have content inside <simpla-text> in production. If newer content gets saved you will experience FOUC (Flash Of Unformatted Content) when the static content is overwritten
Plaintext
By default simpla-text provides editable richtext, with basic formatting controls (bold, italic, underline, links) available to the user. You can disable all formatting tools and force simpla-text to create plain text content only with the plaintext property.
<simpla-textpath="/text" plaintext></simpla-text>
Custom placeholders
You can set custom placeholders (displayed when simpla-text is editable and doesn't have content) with a placeholder attribute
<simpla-textpath="/text" placeholder="Start typing..."></simpla-text>
Typographer
Simpla-text applies 'smart typography' rules to its content, including:
  • Smart quotes (" to “)
  • Automatic em dashes (-- to —)
  • Automatic ellipses (... to …)
You can disable the typographer by giving simpla-text a noTypographer property
<simpla-textpath="/text" no-typographer></simpla-text>
Readonly
Simpla-text has a readonly property that stops the element from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-text to purely consume and display content from Simpla's API.
<simpla-textpath="/text" readonly></simpla-text>
Contributing
If you find any issues with simpla-text please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.
MIT © Simpla
About
An editable richtext element you can update inline
www.simplajs.org
Topics
content-managementeditorjavascriptpolymerrichtexteditorsimplatextweb-components
Resources
Readme
MIT license
Activity
Custom properties
Stars
11 stars
Watchers
3 watching
Forks
3 forks
Report repository
Releases
Packages
Used by
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
BranchesTags
Repository files navigation
Simpla Text
Build statusSizeVersionPublished
Simpla-text is an element containing editable richtext, which you can update seamlessly inline on your page. Use it on its own or inside other textual elements. It's built on the Simpla content system.
<simpla-textpath="/text"></simpla-text>
Contents
Resources
Installation and setup
Install simpla-text with Bower (Yarn support coming soon)
$ bower i simpla-text --save
Setup Simpla on your page, then import simpla-text into your <head>
<linkrel="import" href="/bower_components/simpla-text/simpla-text.html">
Use <simpla-text> wherever you want editable text on your page. Give each text element a unique path, where it will store its content in your project
<simpla-textpath="/text"></simpla-text>
Editing content
Edit text by entering edit mode with Simpla, or setting the editable property directly on an element.
// Enter edit modeSimpla.editable(true);
<!-- Make only this text editable --><simpla-textpath="/text" editable></simpla-text>
Entering edit mode is the recommended way to edit text. It ensures all elements on a page remain in sync and updates Simpla's public editable state, which other elements may rely on.
Saving content
Save simpla-text content by calling Simpla's save() method, which will save all modified content on the page. It returns a promise.
// Save all modified Simpla contentSimpla.save();
You must be authenticated with Simpla before saving content
Inline content
You can use <simpla-text> either as a standalone text container, or inside other textual elements (headings, paragraphs, etc). When used inside other textual elements, simpla-text automatically enables inline mode, which disables paragraphs and inserts line breaks for new lines.
<!-- Standalone text container, uses paragraphs --><simpla-textpath="/text"></simpla-text><!-- Inline content, line breaks only --><h1><simpla-textpath="/text"></simpla-text></h1>
You can also force inline mode by setting the inline property on simpla-text
<!-- Inline content, line breaks only --><simpla-textpath="/text" inline></simpla-text>
Initializing with static content
You can write HTML content inside simpla-text just like you would with any other element. The HTML you insert will be parsed into simpla-text's content model when you enter edit mode. If content for a text's path exists on Simpla's API any static content will be overwritten.
<simpla-textpath="/text"><p>Simpla text is a block of editable richtext for the Simpla content system</p></simpla-text>
Initializing with static content is useful for converting existing sites to Simpla, or bootstrapping a project with predefined content. By putting content inside <simpla-text> and then calling Simpla.save() you can easily set content directly to Simpla's API.
Since static content is overwritten by remote data, you should not have content inside <simpla-text> in production. If newer content gets saved you will experience FOUC (Flash Of Unformatted Content) when the static content is overwritten
Plaintext
By default simpla-text provides editable richtext, with basic formatting controls (bold, italic, underline, links) available to the user. You can disable all formatting tools and force simpla-text to create plain text content only with the plaintext property.
<simpla-textpath="/text" plaintext></simpla-text>
Custom placeholders
You can set custom placeholders (displayed when simpla-text is editable and doesn't have content) with a placeholder attribute
<simpla-textpath="/text" placeholder="Start typing..."></simpla-text>
Typographer
Simpla-text applies 'smart typography' rules to its content, including:
  • Smart quotes (" to “)
  • Automatic em dashes (-- to —)
  • Automatic ellipses (... to …)
You can disable the typographer by giving simpla-text a noTypographer property
<simpla-textpath="/text" no-typographer></simpla-text>
Readonly
Simpla-text has a readonly property that stops the element from becoming editable, even if Simpla is in edit mode or you try to set editable on the element directly. This is useful for using simpla-text to purely consume and display content from Simpla's API.
<simpla-textpath="/text" readonly></simpla-text>
Contributing
If you find any issues with simpla-text please report them! If you'd like to see a new feature in supported file an issue. We also happily accept PRs.
MIT © Simpla
About
An editable richtext element you can update inline
www.simplajs.org
Topics
content-managementeditorjavascriptpolymerrichtexteditorsimplatextweb-components
Resources
Readme
MIT license
Activity
Custom properties
Stars
11 stars
Watchers
3 watching
Forks
3 forks
Report repository
Releases
Packages
Used by
Contributors
Languages