CSS Script

Handle Long Press/Tap Event In JavaScript – long-press-event

CSS Script — Tue, 21 Apr 2026 14:50:41 +0000

long-press.js is a small JavaScript library which detects and handles the long press/tap event on a specific DOM (or the whole document). Supports both desktop and mobile.

How to use it:

Import the long-press.js library into your html document.

Attach the long press/tap event handler to a specific element.

var el = document.getElementById('demo');

el.addEventListener('long-press', function(e) {
  // do something
});

Or attach the event handler to the whole document.

document.addEventListener('long-press', function(e) {
  // do something
});

Customize the time delay in milliseconds. Default: 1.5s.

Press and hold me for .5s

Changelog:

v2.5.2 (04/21/2026)

Bugfixes

v2.5.0 (04/27/2024)

Bugfix

v2.4.6 (02/25/2023)

Bugfix

v2.4.4 (05/25/2021)

update

v2.4.2 (11/16/2020)

suppress click event bug

v2.4.1 (11/15/2020)

Click event no longer fires after long-press event

v2.1.0 (09/23/2019)

Added possibility to forward clientX and clientY values

v2.0.1 (09/08/2019)

removed disable context menu, causes problems on android devices

v2.0.0 (08/29/2019)

replaced setTimeout with requestAnimationFrame for more accurate timing

v1.0.7 (08/28/2019)

disabled logging

v1.0.6 (07/02/2019)

refactored code and added useCapture=true for events

03/21/2018

fixed IIFE Webpack bug

02/02/2018

renamed to long-press-event

09/14/2018

v1.0.2

The post Handle Long Press/Tap Event In JavaScript – long-press-event appeared first on CSS Script.

2D/3D Data Visualization with Ray Tracing in JavaScript – MorphCharts

CSS Script — Tue, 21 Apr 2026 14:50:08 +0000

MorphCharts is an open-source JavaScript visualization library that creates rich 2D and 3D data visualizations using ray tracing and procedural geometry. Developed by Microsoft.

The library takes a dual approach to chart creation. You can define visualizations using a JSON specification based on an extended subset of the VEGA grammar, or you can build them programmatically using the Core library with a Renderer.

This means you can prototype quickly with JSON specs or integrate deeply into your application’s architecture with code-based implementations.

Features:

Ray-traced rendering pipeline: Renders charts using path tracing with global illumination, supporting diffuse, metal, glass, glossy, and emissive materials for photorealistic visualizations.
Multiple geometric primitives: Supports rectangles, cuboids, spheres, cylinders, hex prisms, ring segments, and torus segments for diverse visualization types.
Flexible data sources: Load data inline through JSON definitions or link to external CSV files via URLs, with local file support in the web client.
WebGPU acceleration: Uses GPU rendering through WebGPU for fast ray tracing and multiple render passes, including color, normal maps, depth maps, and edge detection.
Arbitrary resolution output: Generate visualizations at any resolution, including 4K single images or larger outputs through tiled rendering that can be stitched together.
Material and texture support: Apply solid colors or textures to any geometric primitive with full material property control for realistic surface appearances.

Installation

1. Clone the repository and install dependencies:

git clone https://github.com/microsoft/morphcharts.git
cd morphcharts
npm install

2. Build and start the client. The build process compiles all components and starts a local web server. The start_client command automatically opens client.html in your default browser, where you can immediately start creating visualizations through the web interface.

npm run build_client
npm run start_client

3. Create Visualizations with JSON Specifications. This approach extends VEGA grammar with 3D support. Here’s a 3D bar chart example:

{
  "title": "3D Stacked Bar Chart",
  "description": "A 3D stacked bar chart",
  "width": 640,
  "height": 360,
    
  "camera": {"position": [0, 0.6, 1.2]},
    
  "data": [ 
    {
      "name": "table",
      "values": [
        {"category": "A", "subcategory": "One", "amount": 42},
        {"category": "B", "subcategory": "One", "amount": 87},
        {"category": "C", "subcategory": "One", "amount": 15},
        {"category": "D", "subcategory": "One", "amount": 63},
        {"category": "E", "subcategory": "One", "amount": 29},
        {"category": "F", "subcategory": "One", "amount": 91},
        {"category": "G", "subcategory": "One", "amount": 8},
        {"category": "H", "subcategory": "One", "amount": 76},
        {"category": "I", "subcategory": "One", "amount": 54},
        {"category": "J", "subcategory": "One", "amount": 33},

        {"category": "A", "subcategory": "Two", "amount": 67},
        {"category": "B", "subcategory": "Two", "amount": 23},
        {"category": "C", "subcategory": "Two", "amount": 94},
        {"category": "D", "subcategory": "Two", "amount": 38},
        {"category": "E", "subcategory": "Two", "amount": 81},
        {"category": "F", "subcategory": "Two", "amount": 12},
        {"category": "G", "subcategory": "Two", "amount": 56},
        {"category": "H", "subcategory": "Two", "amount": 33},
        {"category": "I", "subcategory": "Two", "amount": 70},
        {"category": "J", "subcategory": "Two", "amount": 19},

        {"category": "A", "subcategory": "Three", "amount": 25},
        {"category": "B", "subcategory": "Three", "amount": 59},
        {"category": "C", "subcategory": "Three", "amount": 11},
        {"category": "D", "subcategory": "Three", "amount": 72},
        {"category": "E", "subcategory": "Three", "amount": 44},
        {"category": "F", "subcategory": "Three", "amount": 60},
        {"category": "G", "subcategory": "Three", "amount": 39},
        {"category": "H", "subcategory": "Three", "amount": 90},
        {"category": "I", "subcategory": "Three", "amount": 18},
        {"category": "J", "subcategory": "Three", "amount": 77}
      ],
      "transform": [
        {
          "type": "stack",
          "groupby": ["category"],
          "sort": {"field": "subcategory"},
          "field": "amount",
          "as": ["y0", "y1"]
        }
      ]
    },
    {
      "name": "aggregate",
      "source": "table",
      "transform": [
        {
          "type": "aggregate",
          "groupby": ["category"],
          "ops": ["sum"],
          "fields": ["amount"],
          "as": ["total"]
        }
      ]
    }
  ],

  "scales": [
    {
      "name": "xscale", 
      "type": "band", 
      "_domain": {"data": "table", "field": "category"},
      "domain": {
        "data": "aggregate",
        "field": "category",
        "sort": {"field": "total", "op": "max", "order": "ascending"}
      },
      "range": "width",
      "padding": 0.25
    }, 
    {
      "name": "yscale",
      "type": "linear",
      "domain": {"data": "table", "field": "y1"},
      "nice": true,
      "range": "height"
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category",
      "domain": {"data": "table", "field": "subcategory"}
    }
  ],

  "axes": [
    {
      "orient": "bottom",
      "scale": "xscale",
      "labelBaseline": "top",
      "labelOffsetY": 0.1,
      "labelOffsetZ": 32,
      "labelAngleX": 90,
      "title": "Category",
      "titleOffsetZ": 64,
      "titleOffsetY": 0.1,
      "titleAngleX": 90,
      "domain": false
    },
    {
      "orient": "left",
      "orientZ": "back",
      "scale": "yscale",
      "grid": true,
      "gridWidth": 0.1,
      "tickCount": 10,
      "labelAlign": "right",
      "labelOffsetX": -2,
      "labelOffsetY": 4,
      "title": "Amount",
      "titleOffsetX": -32,
      "titleAngle": -90
    }
  ],
 
  "marks": [
    {
      "type": "rect",
      "geometry": "xzrect",
      "material": "glossy",
      "encode": {
        "enter": {
          "xc": {"signal": "width/2"},
          "width": {"signal": "width*2"},
          "depth": {"signal": "width*2"},
          "fuzz": {"value": 0.1},
          "fill": {"value": "white"}
        }
      }
    },
    {
      "type": "rect",
      "geometry": "cylindersdf",
      "material": "glossy",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "x": {"scale": "xscale", "field": "category"},
          "width": {"scale": "xscale", "band": 1},
          "y": {"scale": "yscale", "field": "y0"},
          "y2": {"scale": "yscale", "field": "y1"},
          "rounding": {"scale": "xscale", "band": 0.025},
          "fill": {"scale": "color", "field": "subcategory"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "middle"},
          "x": {"scale": "xscale", "field": "category", "band": 0.5},
          "y": {"scale": "yscale", "signal": "(datum.y0+datum.y1)/2"},
          "z": {"scale": "xscale", "band": 0.5},
          "fill": {"value": "white"},
          "text": {"field": "amount"}
        }
      }
    },
    {
      "type": "text",
      "from": {"data": "aggregate"},
      "encode": {
        "enter": {
          "align": {"value": "center"},
          "baseline": {"value": "bottom"},
          "x": {"scale": "xscale", "field": "category", "band": 0.5},
          "y": {"scale": "yscale", "field": "total"},
          "stroke": {"value": "white"},
          "strokeWidth": {"value": 0.5},
          "text": {"field": "total"}
        }
      }
    }
  ]
}

Changelog:

04/21/2026

Update

The post 2D/3D Data Visualization with Ray Tracing in JavaScript – MorphCharts appeared first on CSS Script.

5,600+ Brand SVG Icons for Developers – theSVG

CSS Script — Tue, 21 Apr 2026 07:00:54 +0000

theSVG is an open-source icon library that provides 5,600+ brand SVG icons as React, Vue, and Svelte components, inline CDN assets, or downloadable PNG files.

Features:

4,000+ brand icons: AI tools, dev frameworks, social platforms, payment processors, cloud services, databases, and 55+ other categories.
Each icon supports up to seven variants: default, mono, light, dark, wordmark, wordmarkLight, and wordmarkDark.
The @thesvg/icons scoped package lets you import a single icon.
Dedicated typed component packages exist for React, Vue 3, and Svelte
A public HTTP API at thesvg.org exposes search, single-icon metadata, category listing, and raw SVG file delivery.
@thesvg/cli lets you pull icons into your project from the terminal.
@thesvg/mcp-server integrates theSVG into Claude, Cursor, and Windsurf AI assistants.

Installation:

1. Install the full thesvg package:

# NPM
$ npm install thesvg

2. For a tree-shakeable setup where you import only specific icons, use the scoped package:

# NPM
$ npm install @thesvg/icons

3. For framework-specific typed components, install the relevant adapter:

# React
npm install @thesvg/react

# Vue 3
npm install @thesvg/vue

# Svelte
npm install @thesvg/svelte

Usages:

1. The thesvg package exposes icon objects directly. Each object contains the raw SVG string, the brand title, the primary hex color, and all available variants.

// Import a single icon object from the main package
import vercel from "thesvg/vercel";

// Raw SVG markup string
console.log(vercel.svg);

// Human-readable brand name: "Vercel"
console.log(vercel.title);

// Primary brand hex code (no leading #): "000000"
console.log(vercel.hex);

// Object of all available SVG variants for this icon
// Variants: default, mono, light, dark, wordmark, etc.
console.log(vercel.variants);

2. Use the icons as React components.

// Import typed React icon components
import { Figma, Notion, Linear } from "@thesvg/react";
export function TechStack() {
  return (
    
      {/* Render the Figma logo at 32px with a custom CSS class */}
      
      {/* Render the Notion logo in the same row */}
      
      {/* Render the Linear logo in the same row */}
      
    
  );
}

3. Use the icons as Vue components.

4. Use the icons as Svelte components.

5. Or drop the icons directly into any HTML file via the thesvg.org CDN or jsDelivr.

6. Use the @thesvg/cli tool to pull icons directly into your project directory.

# Add the Vercel icon to your project
npx @thesvg/cli add vercel

# Search icons by keyword — useful for browsing the AI category
npx @thesvg/cli search "payment"

7. The public API at https://thesvg.org supports icon search, metadata retrieval, category listing, and raw SVG delivery.

GET /api/icons?q={query}&category={category}&limit={n}
  — Search the icon library by keyword and optional category filter.

GET /api/icons/{slug}
  — Fetch full metadata for a single icon, including all variants.

GET /api/categories
  — List all 55+ categories with icon counts.

GET /api/registry/{slug}
  — shadcn-compatible registry endpoint for direct component consumption.

GET /icons/{slug}/{variant}.svg
  — Serve a raw SVG file for a specific icon and variant.

# Search for icons in the "Payment" category
curl "https://thesvg.org/api/icons?category=Payment&limit=10"

# Get full metadata for the Stripe icon
curl "https://thesvg.org/api/icons/stripe"

# List all available categories
curl "https://thesvg.org/api/categories"

Icon Variants:

Variant	Key	Description
Default	`default`	Primary brand color. Always present.
Mono	`mono`	Inherits the current text color.
Light	`light`	White fill — for dark backgrounds.
Dark	`dark`	Black fill — for light backgrounds.
Wordmark	`wordmark`	Full horizontal logo with text.
Wordmark Light	`wordmarkLight`	White wordmark version.
Wordmark Dark	`wordmarkDark`	Dark wordmark version.

MCP server for AI assistants:

The @thesvg/mcp-server package connects theSVG to AI-powered editors. Configure it in your Claude, Cursor, or Windsurf workspace to let your AI assistant search and insert brand icons on demand.

# Install the MCP server globally
npm install -g @thesvg/mcp-server

FAQs:

Q: Can I use the brand icons in a commercial project?
A: The theSVG codebase and tooling are MIT-licensed. The brand icons themselves remain the intellectual property of their respective trademark holders. Check each brand’s trademark usage guidelines before commercial use.

Q: The CDN URL returns a 404 for the variant I requested. What’s wrong?
A: Not every icon ships with all seven variants. The default variant is the only one guaranteed to exist for every icon. Query the REST API at GET /api/icons/{slug} first to confirm which variants are available for a given slug, then reference only those in your markup.

Q: How do I get the correct hex color to style the mono icon?
A: Import the icon object from thesvg/{slug} and read the .hex property. It returns the brand’s primary color as a six-digit hex string.

Q: My bundle includes icons I’m not using. How do I fix that?
A: Switch from the thesvg package to @thesvg/icons. The scoped package is designed for tree-shaking. Import individual icons by path (import { Vercel } from "@thesvg/icons/vercel") so your bundler can drop everything else at build time.

Q: How do I integrate theSVG into a Next.js App Router project?
A: Install @thesvg/react and import components inside a Client Component or a Server Component. The components are pure SVG output with no client-side interactivity, so they work in both contexts. For image-based usage in Next.js, use the CDN URL with the built-in component and set unoptimized={true} if you need the raw SVG format.

Changelog:

v2.2.0 (04/21/2026)

Added more icons.

v2.1.1 (03/29/2026)

Bugfixes and improvements.

v2.1.0 (03/26/2026)

New collection, new integration, and community-submitted icons.

v2.0.0 (03/18/2026)

Added 739 AWS Architecture Icons

The post 5,600+ Brand SVG Icons for Developers – theSVG appeared first on CSS Script.

Minimal WYSIWYG Editor In Pure JavaScript – Suneditor

CSS Script — Tue, 21 Apr 2026 07:00:51 +0000

Suneditor is a lightweight, flexible, customizable, pure JavaScript WYSIWYG text editor for your web applications.

How to use it:

Load the needed suneditor.css and suneditor.js in the html document.

Create a normal textarea element for the WYSIWYG editor.

Hello World!

Create a new editor from the textarea element. Done.

SUNEDITOR.create('editor');

All default options to customize the WYSIWYG editor.

SUNEDITOR.create('editor', {

  // plugins to load
  plugins: [
    font,
    fontSize,
    formatBlock,
    fontColor,
    hiliteColor,
    align,
    lineHeight,
    horizontalRule,
    list,
    table,
    link,
    image,
    video,
    template,
    textStyle,
    blockquote,
    paragraphStyle,
    math, // You must add the 'katex' library at options to use the 'math' plugin.
    imageGallery
  ] 

  // set the initial value
  value: '',

  // disable clean mode, which checks the styles, classes, etc. of the editor content
  strictMode : false,

  // Enforces strict HTML validation based on the editor`s policy. 
  // Applies to methods like setContents to ensure content compliance when enabled. 
  strictHTMLValidation: true,

  // default tag name of the editor.
  defaultTag: 'p',

  // When recording the history stack, this is the delay time(miliseconds) since the last input
  historyStackDelayTime: 400,

  // Add tags to the default tags whitelist of editor.
  // _defaultTagsWhitelist : 'br|p|div|pre|blockquote|h[1-6]|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|span|strike|del|sub|sup'
  addTagsWhitelist: '',

  // blacklist
  tagsBlacklist: null,
  pasteTagsBlacklist: null,

  // Whitelist of tags when pasting. 
  // _editorTagsWhitelist  : _defaultTagsWhitelist + addTagsWhitelist
  // ex) 'p|h[1-6]'
  pasteTagsWhitelist: _editorTagsWhitelist,

  // Blacklist of the editor default tags. 
  // e.g. 'h1|h2' 
  tagsBlacklist: null,

  //  Blacklist of tags when pasting. 
  // e.g. 'h1|h2' 
  pasteTagsBlacklist: null,


  // Add attributes whitelist of tags that should be kept undeleted from the editor.
  // -- Fixed whitelist --
  // Native attributes: 'contenteditable|colspan|rowspan|target|href|src|class|type'
  // Editor attributes: 'data-format|data-size|data-file-size|data-file-name|data-origin|data-align|data-image-link|data-rotate|data-proportion|data-percentage|origin-size'
  // ex) {
  //  'all': 'style', // Apply to all tags
  //  'input': 'checked' // Apply to input tag
  // }              
  attributesWhitelist: null,

  // blacklist
  attributesBlacklist: null,

  // language object
  lang: lang['en'],

  // change the tag of the default text button. 
  textTags: { bold: 'STRONG', underline: 'U', italic: 'EM', strike: 'DEL' },

  // change default formatBlock array.
  formats: ['p', 'div', 'blockquote', 'pre', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],

  // show the number of characters in the editor.   
  charCounter: false,

  // null || 'char' || 'byte' || 'byte-html'
  charCounterType: 'char',

  // text to be displayed in the "charCounter" area of the bottom bar
  charCounterLabel: null,

  // the maximum number of characters allowed to be inserted into the editor.
  maxCharCount: null,

  // the min-width size of the editor.
  minWidth: null,

  // the max-width size of the editor.
  maxWidth: null,

  // the size of the total uploadable images (in bytes).
  imageUploadSizeLimit: null,

  // if true, multiple images can be selected.
  imageMultipleFile: false,

  // allowed extensions like '.jpg, .png ..'
  imageAccept: "*",

  // The url of the image gallery, if you use the image gallery.
  // When "imageUrlInput" is true, an image gallery button is created in the image modal.
  // You can also use it by adding 'imageGallery' to the button list.
  imageGalleryUrl: null,

  // Http Header when get image gallery. 
  imageGalleryHeader: null,

  // 'classic', 'inline', 'balloon', 'balloon-always'
  mode: 'classic',

  // if true, the editor is set to RTL(Right To Left) mode.
  rtl: false,

  // deletes other attributes except for the property set at the time of line break.
  lineAttrReset: '',

  // toolbar width
  toolbarWidth: 'max-content',

  // 'cell', 'top'
  tableCellControllerPosition: 'cell',

  // if true, disables the interaction of the editor and tab key.
  tabDisable: false,

  // You can disable shortcuts.
  // e.g. ['bold', 'strike', 'underline', 'italic', 'undo', 'indent']
  shortcutsDisable: [],
                    
  // If false, hide the shortcuts hint.
  shortcutsHint: true,

  // A custom HTML selector placing the toolbar inside.
  toolbarContainer: null,

  // Sets to -1 or false or null to turn off
  // Sticky Toolbar
  // Default: 0px (offset)
  stickyToolbar: 0,

  // The toolbar is rendered hidden
  hideToolbar: false,

  // top offset value of "full Screen"
  fullScreenOffset: '',

  // the position property of suneditor.   
  position: null,

  // places content in the iframe
  iframe : false,

  // allows the usage of HTML, HEAD, BODY tags and DOCTYPE declaration.
  fullPage: false,

  // Attributes of the iframe
  iframeAttributes: null,

  // CSS file to apply inside the iframe
  iframeCSSFileName: 'suneditor',

  // e.g. Preview Template
 {{contents}} _Footer_
  previewTemplate: null,

  // A template of the "print".
  // The {{contents}} part in the HTML string is replaced with the contents of the editor.
  // e.g. "Print Template
 {{contents}} _Footer_"
  printTemplate: null,

  // CodeMirror option object
  codeMirror: null,

  // katex options
  // https://github.com/KaTeX/KaTeX
  katex: null,

  // Math plugin font size list.
  mathFontSize: [
    {text: '1', value: '1em', default: true},
    {text: '1.5', value: '1.5em'},
    {text: '2', value: '2em'},
    {text: '2.5', value: '2.5em'}
  ],

  // Shows the bottom resizing bar.
  resizingBar: true,

  // Font Family array
  font: ['Arial', 'Comic Sans MS', 'Courier New', 'Impact', 'Georgia','tahoma', 'Trebuchet MS', 'Verdana'],

  // Font Size array
  fontSize: [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72],

  // Font size unit
  fontSizeUnit: 'px',

  // A list of drop-down options for the 'align' plugin
  alignItems: ['right', 'center', 'left', 'justify'],

  // Enables video resizing
  videoResizing: true,

  // width/height of the video
  videoWidth: 560,
  videoHeight: '56.25%',

  // If true, video size can only be scaled by percentage.
  videoSizeOnlyPercentage: false,

  // Choose whether to video rotation buttons display.
  videoRotation: false,

  // The default aspect ratio of the video.
  videoRatio: 0.5625,

  // Video ratio selection options.
  videoRatioList:  [ {name: 'Classic Film 3:2', value: 0.6666}, {name: 'HD', value: 0.5625} ],

  // Choose whether the video height input is visible.
  videoHeightShow: true,

  // Choose whether the video align radio buttons are visible
  videoAlignShow: true,

  // Choose whether the video ratio options is visible.
  videoRatioShow: true,

  // the query string of a YouTube embedded URL. 
  youtubeQuery: '',

  // The query string of a Vimeo embedded URL
  vimeoQuery: '',

  // whether to create a file input tag in the video upload window.
  videoFileInput: false,

  // whether to create a video url input tag in the video upload window.
  // if the value of videoFileInput is false, it will be unconditionally.
  videoUrlInput: true,

  // Http Header when uploading videos.  
  videoUploadHeader: null,

  // the video upload to server mapping address.
  videoUploadUrl: null,

  // the size of the total uploadable videos (in bytes).
  videoUploadSizeLimit:  null,

  // if true, multiple videos can be selected. 
  videoMultipleFile:  false,

  // define "Attributes" of the video tag.
  videoTagAttrs: null,

  // define "Attributes" of the iframe tag
  videoIframeAttrs: null,

  // allowed extensions like '.mp4, .avi ..'
  videoAccept: "*",

  // default width of the audio frame.  
  audioWidth: '300px',

  // default height of the audio frame. 
  audioHeight: default,

  // whether to create a file input tag in the audio upload window
  audioFileInput: false,

  // whether to create a audio url input tag in the audio upload window.
  audioUrlInput: true,

  // Http Header when uploading audios. 
  audioUploadHeader: null,

  // upload url
  audioUploadUrl: null,

  // the size of the total uploadable audios (in bytes).
  // invokes the "onAudioUploadError" method.
  audioUploadSizeLimit: null,

  // if true, multiple audios can be selected.
  audioMultipleFile: false,

  // define "Attributes" of the audio tag.  
  audioTagAttrs: null,

  // allowed extensions like '.mp3, .wav ..'
  audioAccept: "*",

  // default protocol for the links. ('link', 'image', 'video', 'audio')
  linkProtocol: null,

  // default checked value of the "Open in new window" checkbox
  linkTargetNewWindow: false,

  // Allows script tags.
  __allowedScriptTag: false, 

  // the placeholder text.  
  placeholder: null,

  // Activate the media[image, video, audio] selection status immediately after inserting the media tag.
  mediaAutoSelect: true,

  // custom icons
  // {
  //   bold: 'B',
  //   table: '',
  //   insert_row_above: ''
  // }
  icons: null,

  // defines "rel" attribute list of anchor tag
  // e.g. ['author', 'external', 'nofollow']
  linkRel: [],

  // defines default "rel" attributes of anchor tag.
  // e.g.
  // {
  //   default: 'nofollow', // Default rel
  //   check_new_window: 'noreferrer noopener', // When "open new window" is checked 
  //   check_bookmark: 'bookmark' // When "bookmark" is checked 
  // },
  linkRelDefault: {},

  // If true, disables the automatic prefixing of the host URL to the value of the link
  linkNoPrefix: false,

  // Defines the hr items.
  hrItems: [
    {name: lang.toolbar.hr_solid, class: '__se__solid'},
    {name: lang.toolbar.hr_dashed, class: '__se__dashed'},
    {name: lang.toolbar.hr_dotted, class: '__se__dotted'}
  ],

  // Choose whether the image height input is visible.
  imageHeightShow: true,

  // Choose whether the image align radio buttons are visible.
  imageAlignShow: true,

  // enables image resizing
  imageResizing: true,

  // image width/height
  imageWidth: 'auto',
  imageHeight: 'auto',

  // If true, image size can only be scaled by percentage
  imageSizeOnlyPercentage: true,

  // Shows image rotation buttons
  imageRotation: false,

  // image file input
  imageFileInput: true,

  // image url input
  imageUrlInput: true,

  // image upload url
  imageUploadUrl: null,

  // Http Header when uploading images
  imageUploadHeader: null,

  // height/width of the editor
  height: '',
  width: '',

  // min height/width of the editor
  minHeight: null,
  minWidth: null,

  // color array of color picker
  // e.g. [['#ccc', '#dedede', 'OrangeRed', 'Orange', 'RoyalBlue', 'SaddleBrown'], ['SlateGray', 'BurlyWood', 'DeepPink', 'FireBrick', 'Gold', 'SeaGreen']]
  colorList: null,

  // line-height array
  lineHeights: [
    {text: '1', value: 1},
    {text: '1.15', value: 1.15},
    {text: '1.5', value: 1.5},
    {text: '2', value: 2}
  ],

  // Displays the current node structure to resizingBar
  showPathLabel: true,

  // Enable/disable resize function of bottom resizing bar
  resizeEnable: true,

  // A custom HTML selector placing the resizing bar inside
  resizingBarContainer: null,

  // Size of background area when activating dialog window
  popupDisplay: '',

  // CSS display property
  display: 'block',

  // show/hide toolbar icons
  buttonList: [
    ['undo', 'redo'],
    ['font', 'fontSize', 'formatBlock'],
    ['paragraphStyle', 'blockquote'],
    ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'],
    ['fontColor', 'hiliteColor', 'textStyle'],
    ['removeFormat'],
    '/', // Line break
    ['outdent', 'indent'],
    ['align', 'horizontalRule', 'list', 'lineHeight'],
    ['table', 'link', 'image', 'video', 'audio' /** ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin.
    /** ['imageGallery'] */ // You must add the "imageGalleryUrl".
    ['fullScreen', 'showBlocks', 'codeView'],
    ['preview', 'print'],
    ['save', 'template']
  ]

  // execute a function when the save button is clicked.
  callBackSave: function(){}
  
})

API methods:

var suneditor = SUNEDITOR.create('Editor');

// Copies the contents of the suneditor into a [textarea]
suneditor.save();

// Updates options
suneditor.setOptions(OPTIONS);

// Gets the suneditor's context object. Contains settings, plugins, and cached element objects
suneditor.getContext();

// Gets the contents of the suneditor
suneditor.getContents();

// Changes the contents of the suneditor
editor.setContents('set contents');

// Inserts an HTML element or HTML string or plain string at the current cursor position
suneditor.insertHTML('');

// Change the contents of the suneditor
suneditor.setContents('set contents');

// Switch to or off "ReadOnly" mode
suneditor.appendContents('append contents');

// readOnly(value)
suneditor.readOnly(value);

// Upload images using image plugin
editor.insertImage(FileList);

// Disable the suneditor
suneditor.disabled();

// Enabled the suneditor
suneditor.enabled();

// Hide the suneditor
suneditor.hide();

// Show the suneditor
suneditor.show();
    
// Destroy the suneditor
suneditor.destroy();

// Open a notice area
suneditor.noticeOpen('test notice');

// Close a notice area
suneditor.noticeClose();

// Gets a list of images uploaded to the editor
/** 
 * {
 *  src: imgage src
 *  index: data index
 *  name: file name
 *  size: file size
 *  select: select function
 *  delete: delete function
 * }
 **/
suneditor.getImagesInfo();

Event functions.

editor.onload = function (core, reload) {
    console.log('onload-core', core)
    console.log('onload-reload', reload)    
}

suneditor.onScroll = function (e) { console.log('onScroll', e) }

editor.onMouseDown = function (e, core) { console.log('onMouseDown', e) }

suneditor.onClick = function (e) { console.log('onClick', e) }

editor.onInput = function (e, core) { console.log('onInput', e) }

suneditor.onKeyDown = function (e) { console.log('onKeyDown', e) }

suneditor.onKeyUp = function (e) { console.log('onKeyUp', e) }

suneditor.onDrop = function (e) { console.log('onDrop', e) }

editor.onSave = function (contents, core) {console.log(contents) }

suneditor.onChange = function (contents) { console.log('onChange', contents) }

editor.onFocus = function (e, core) { console.log('onFocus', e) }

editor.onBlur = function (e, core) { console.log('onBlur', e) }

editor.onPaste = function (e, cleanData, maxCharCount) { console.log('onPaste', e, cleanData, maxCharCount) }

editor.onPasteMath = function (e, core) { console.log('onPasteMath', e) }

editor.onCopy = function (e, clipboardData, core) { console.log('onCopy', e) }

editor.onCut = function (e, clipboardData, core) { console.log('onCut', e) }

// Called before the image is uploaded
// If false is returned, no image upload is performed.
/**
 * files: Files array
 * info: Input information
 * core: Core object
 * return {Boolean}
 */
editor.onImageUploadBefore: function (files, info, core) {
    console.log('files', files);
    console.log('info', info);
    return Boolean
}

// Called before the video is uploaded
// If true is returned, the internal upload process runs normally.
// If false is returned, no video(iframe, video) upload is performed.
// If new fileList are returned,  replaced the previous fileList
// If undefined is returned, it waits until "uploadHandler" is executed.
/** 
 * files: Files array
 * info: {
 * - inputWidth: Value of width input
 * - inputHeight: Value of height input
 * - align: Align Check Value
 * - isUpdate: Update video if true, create video if false
 * - element: If isUpdate is true, the currently selected video.
 * }
 * core: Core object,
 * uploadHandler: If undefined is returned, it waits until "uploadHandler" is executed.
 *                "uploadHandler" is an upload function with "core" and "info" bound. (plugin.upload.bind(core, info))
 *                [upload files] : uploadHandler(files or [new File(...),])
 *                [error]        : uploadHandler("Error message")
 *                [Just finish]  : uploadHandler()
 *                [directly register] : uploadHandler(response) // Same format as "videoUploadUrl" response
 *                                   ex) {
 *                                      // "errorMessage": "insert error message",
 *                                      "result": [ { "url": "...", "name": "...", "size": "999" }, ]
 *                                   }
 * return {Boolean|Array|undefined}
 */

// Called before the audio is uploaded
// If true is returned, the internal upload process runs normally.
// If false is returned, no audio upload is performed.
// If new fileList are returned,  replaced the previous fileList
// If undefined is returned, it waits until "uploadHandler" is executed.
/** 
 * files: Files array
 * info: {
 * - isUpdate: Update audio if true, create audio if false
 * - currentaudio: If isUpdate is true, the currently selected audio.
 * }
 * core: Core object,
 * uploadHandler: If undefined is returned, it waits until "uploadHandler" is executed.
 *                "uploadHandler" is an upload function with "core" and "info" bound. (plugin.upload.bind(core, info))
 *                [upload files] : uploadHandler(files or [new File(...),])
 *                [error]        : uploadHandler("Error message")
 *                [Just finish]  : uploadHandler()
 *                [directly register] : uploadHandler(response) // Same format as "audioUploadUrl" response
 *                                   ex) {
 *                                      // "errorMessage": "insert error message",
 *                                      "result": [ { "url": "...", "name": "...", "size": "999" }, ]
 *                                   }
 * return {Boolean|Array|undefined}
 */

// Called when the audio is is uploaded, updated, deleted
// -- arguments is same "onImageUpload" --
editor.onAudioUpload = function (targetElement, index, state, info, remainingFilesCount, core) {
  console.log(`targetElement:${targetElement}, index:${index}, state('create', 'update', 'delete'):${state}`)
  console.log(`info:${info}, remainingFilesCount:${remainingFilesCount}`)
}

// Called when the video(iframe, video) upload failed
// -- arguments is same "onImageUploadError" --
editor.onVideoUploadError = function (errorMessage, result, core) {
  alert(errorMessage)
  return Boolean
}
// Called when the audio upload failed
// -- arguments is same "onImageUploadError" --
editor.onAudioUploadError = function (errorMessage, result, core) {
  alert(errorMessage)
  return Boolean
}

// Called when the editor is resized using the bottom bar
// height, prevHeight are number
editor.onResizeEditor = function (height, prevHeight, core) {
  console.log(`height: ${height}, prevHeight: ${prevHeight}`)
}

// Called after the "setToolbarButtons" invocation
// Can be used to tweak buttons properties (useful for custom buttons)
/**
 * buttonList: buttonList array 
 * core: Core object
 */
editor.onSetToolbarButtons = function (buttonList, core) {
  console.log(`buttonList: ${buttonList}`)
}

//**
* @description It replaces the default callback function of the video upload
* xmlHttp: xmlHttpRequest object
* info: Input information
* - inputWidth: Value of width input
* - inputHeight: Value of height input
* - align: Align Check Value
* - isUpdate: Update video if true, create video if false
* - element: If isUpdate is true, the currently selected video.
* core: Core object
*/
editor.videoUploadHandler = function (xmlHttp, info, core) {
  // Editor code
  const response = JSON.parse(xmlHttp.responseText);
  if (response.errorMessage) {
      this.plugins.video.error.call(this, response.errorMessage, response);
  } else {
      this.plugins.video.register.call(this, info, response);
  }
}
/**
* @description It replaces the default callback function of the audio upload
* xmlHttp xmlHttpRequest object
* info Input information
* - isUpdate: Update audio if true, create audio if false
* - element: If isUpdate is true, the currently selected audio.
* core Core object
*/
editor.audioUploadHandler = function (xmlHttp, info, core) {
  // Editor code
  const response = JSON.parse(xmlHttp.responseText);
  if (response.errorMessage) {
      this.plugins.audio.error.call(this, response.errorMessage, response);
  } else {
      this.plugins.audio.register.call(this, info, response);
  }
}

// Called just after the controller is positioned and displayed on the screen.
// controller - editing elements displayed on the screen [image resizing, table editor, link editor..]]
/**
* name: The name of the plugin that called the controller
* controllers: Array of Controller elements
* core: Core object
*/
editor.showController = function (name, controllers, core) {
  console.log('plugin name', name);
  console.log('controller elements', controllers);
}

// It replaces the default callback function of the image upload
/**
 * response: Response object
 * info (Input information): {
 * - linkValue: Link url value
 * - linkNewWindow: Open in new window Check Value
 * - inputWidth: Value of width input
 * - inputHeight: Value of height input
 * - align: Align Check Value
 * - isUpdate: Update image if true, create image if false
 * - currentImage: If isUpdate is true, the currently selected image.
 * }
 * core: Core object
 */
editor.imageUploadHandler = function (response, info, core) {
    // Example of upload method
    const res = JSON.parse(response.responseText);
    
    // Error
    if (res.errorMessage) {
        if (typeof editor.onImageUploadError === 'function') {
            if (core.onImageUploadError(res.errorMessage, res.result)) {
                core.notice.open.call(core, res.errorMessage);
            }
        } else {
            core.notice.open.call(core, res.errorMessage);
        }
        /** 
         * You can do the same thing using the core private function.
         * The core._imageUploadError function returns false when "editor.onImageUploadError" function is not defined.
        */
        // if (core._imageUploadError(res.errorMessage, res.result)) {
        //     core.notice.open.call(core, res.errorMessage);
        // }
    }
    // Success
    else {
        const fileList = res.result;
        const imagePlugin = core.plugins.image;

        for (let i = 0, len = fileList.length, file; i < len; i++) {
            // The file object must have name and size attributes.
            file = {name: fileList[i].name, size: fileList[i].size};
            // For existing image updates, the "info" attributes are predefined in the element.
            // The "imagePlugin.update_src" function is only changes the "src" attribute of an image.
            if (info.isUpdate) imagePlugin.update_src.call(core, fileList[i].url, info.currentImage, file);
            // The image is created and a format element(p, div..) is added below it.
            else imagePlugin.create_image.call(core, fileList[i].url, info.linkValue, info.linkNewWindow, info.inputWidth, info.inputHeight, info.align, file);
        }
    }
}

// An event when toggling between code view and wysiwyg view.
/**
 * isCodeView: Whether the current code view mode
 * core: Core object
 */
editor.toggleCodeView = function (isCodeView, core) {
  console.log('isCodeView', isCodeView);
}

// An event when toggling full screen.
/**
 * isFullScreen: Whether the current full screen mode
 * core: Core object
 */
editor.toggleFullScreen = function (isFullScreen, core) {
  console.log('isFullScreen', isFullScreen);
}

// Called when the video(iframe) is is uploaded, updated, deleted
/**
* targetElement: Current iframe element
* index: Uploaded index
* state: Upload status ('create', 'update', 'delete')
* videoInfo: {
* - index: data index
* - select: select function
* - delete: delete function
* - element: iframe element
* - src: src attribute of iframe tag
* }
* remainingFilesCount: Count of remaining files to upload (0 when added as a url)
* core: Core object
*/
editor.onVideoUpload = function (targetElement, index, state, videoInfo, remainingFilesCount, core) {
  console.log(`targetElement:${targetElement}, index:${index}, state('create', 'update', 'delete'):${state}`)
  console.log(`videoInfo:${videoInfo}, remainingFilesCount:${remainingFilesCount}`)
}

// Called before the editor's default event action
editor.showInline = function (toolbar, context) {
  console.log('toolbar', toolbar);
  console.log('context', context);
}

// Called when the image is uploaded or the uploaded image is deleted.
suneditor.onImageUpload = function (targetImgElement, index, isDelete, imageInfo) {
  console.log('targetImgElement :' + targetImgElement + ', index : ' + index + ', isDelete : ' + isDelete)
  console.log(imageInfo)
}

// Called when the image is upload failed.
// If you return false, the default notices are not called.
suneditor.onImageUploadError = function (errorMessage, result) {
  alert(errorMessage)
}

Changelog:

v3.1.2 (04/20/2026)

Updated design border-radius values
Bugfixes

v3.1.1 (04/14/2026)

Bugfixes

v3.1.0 (04/12/2026)

Improve MS Office HTML paste conversion (src/helper/msOffice.js).
Bugfixes.

v3.0.6 (04/08/2026)

Default delayTime for the mention plugin changed from 200 to 120
The toolbar selectAll button now selects the entire editor content immediately instead of stepping through scopes (keyboard Ctrl+A still uses scope stepping)
Improved browser search to query all folders instead of only the currently selected folder
Added keyword highlighting to sbrowser search results for matching file names
Added a clear button to the browser search form to reset the search
An expand option has been added to the file browser to control initial folder expand depth (default: 1)
Fixed a bug where switching folders in the file browser did not update the item list and tags, causing search and tag filters to operate on stale data

v2.47.7 (08/23/2025)

Fixed an issue where images in the image gallery were not clickable when their size was smaller than the label.
Fixed an issue where window.SUNEDITOR did not include the init function.
Fixed a bug where media components were not properly restructured in certain tag structures.

v2.47.6 (07/04/2025)

Improved to prevent certain structures from being broken when pasting HTML formats.
Fixed a bug related to removing selected content.
Fixed a bug where the “pt” font size conversion value was incorrect.
Fixed a bug where special spaces disappeared when viewing HTML code.
Fixed a bug where the attributeWhitelist option was not applied properly.

v2.47.5 (02/06/2025)

Fixed a bug where a tag was unexpectedly rendered in certain situations when removing text style nodes.

v2.47.4 (02/04/2025)

Fixed bug with Enter key behavior in certain situations.
Added Hungarian(hu) translation

v2.47.3 (01/23/2025)

Fixed TypeScript error in “imageGalleryData” option.

v2.47.2 (01/16/2025)

Fixed a bug where line breaks would continue to be added in the code view when “strictMode” is “false”.
Changed ‘strictHTMLValidation’ option to ‘true’.

v2.47.1 (01/09/2025)

A “strictHTMLValidation” option has been added.
A “imageGalleryData” option has been added.
Improved missing TypeScript parts.
Improved mobile check logic.
Bugfix.

v2.47.0 (08/12/2024)

Added vimeoQuery option.
Added onPasteMath(event, core) event.
Fixed bugs.

v2.46.3 (05/28/2024)

Bugfixes

v2.46.2 (04/25/2024)

Fixed a bug where the “line-height” style was not maintained for the format line.

v2.46.1 (04/23/2024)

Added Czech(cs) translation
Fixed bugs

v2.46.0 (04/14/2024)

Added Farsi(persian) translation
Added Turkish(tr) translation added
Added “strictMode” option
Added on[Audio, Image, Video]DeleteBefore event
Improved selection experience
Improved much better fileComponent keyboard experience
Fixed bugs

v2.45.0 (06/19/2023)

Added allowClassName option.
Added __allowedScriptTag option.
Improved to operate properly within the editor when using tags.
Even when using
as a target element, the content inside the tag has been improved so that it is designated as the default value.
Bugfixes

v2.44.10 (04/20/2023)

Bugfixes
Some elements created in the editor have been improved so that the contenteditable attribute is not included.

v2.44.10 (04/11/2023)

Bugfixes

v2.44.8 (04/10/2023)

Bugfixes

v2.44.6 (03/31/2023)

Bugfixes

v2.44.5 (03/28/2023)

Bugfixes

v2.44.4 (03/28/2023)

Urdu(ur) translation added.
Portuguese(pt_br) translation fixed.
Add “contents” parameter to onBlur event.
Improvement of applying line breaks when pasting.
The getContents() method has been improved to return after cleaning the HTML.
The child nodes of .__se__tag tag have also been improved so that the structure and properties are maintained.

v2.44.3 (10/08/2022)

Bugfixes

v2.44.2 (09/29/2022)

Fixed have been made so that the same tags do not continue to overlap when pasting styled text.
Fixed a bug where unintentional styles were applied when pasting.

v2.44.1 (09/25/2022)

Fixed a bug where unintentional styles were applied when pasting.

v2.44.0 (09/22/2022)

Bugfix

v2.43.14 (07/05/2022)

Fixed a bug where the edit window did not work properly when a “Katex” error occurred in the “Math” plugin.

v2.43.13 (06/25/2022)

When editing a link, it has been improved so that the link appears as entered.
Fixed a bug where editor links were not displayed in the edit window when using linkNoPrefix.

v2.43.12 (06/23/2022)

Fixed content style bug when loaded

v2.43.10/11 (06/18/2022)

Bugs fixed

v2.43.9 (06/11/2022)

Fixed a bug where the tag properties were deleted of the value of “options.value” and the value modified in code view mode.
Added “hideToolbar” option.

v2.43.8 (05/31/2022)

Modified so that excessive “span” tags are not generated when copying/pasting text in the Chrome browser.
Bugfix

v2.43.6 (05/20/2022)

Fixed a bug where the button activation effect did not work properly when using the responsive toolbar.
The behavior when pasting into a list has been improved.
Added “aria-label” attribute to button.

v2.43.5 (05/15/2022)

Fixed bugs

v2.43.4 (05/06/2022)

Fixed a bug where the balloon toolbar was not displayed when selecting all

v2.43.3 (05/06/2022)

Fixed a bug where the video was not resizing properly.

v2.43.2 (05/03/2022)

Fixed a bug where placeholders did not appear.
Fixed a IE syntax error.

v2.43.1 (04/26/2022)

Fixed a bug where placeholders did not appear.

v2.43.0 (04/23/2022)

Update

v2.42.0 (01/14/2022)

French (fr) translation fixed.
onSetToolbarButtons event callback has been added.
onSave event callback has been added.
iframeAttributes option has been added.
[image, video]AlignShow options has been added.
attributesBlacklist, tagsBlacklist, pasteTagsBlacklist options has been added.
dir, dir_ltr, dir_rtl buttons has been added.
“#fix” feature has been added to the button group.
linkTargetNewWindow option has been added.
nullMessage, thumbnail attributes has been added to the “imageGalleryUrl” response data.
resizeEnable, resizingBarContainer options has been added.
alignItems option has been added.
lineAttrReset option has been added.
hrItems option has been added.
Fixed to allow empty anchor tags in editor.
Added alt attribute to “imageInfo”.
Fixed to automatically remove trailing whitespace from selected text when creating a link.
Bugfix

v2.41.3 (07/03/2021)

Fixed a bug where some formats were not properly entered when pasting from the Word.

v2.41.2 (06/28/2021)

Exception handling to the readOnly mode has been added.

v2.41.1 (06/26/2021)

Fixed bugs in readOnly mode.
XSS attack vulnerability fixes.
Fixed a bug where the hr tag was not deleted.
Fixed a bug when media tag init.

v2.41.0 (06/22/2021)

Dutch (nl) translation fixed.
A readOnly method has been added.
It has been modified not to check the default format in the __se__tag class.
Added details, summary tags to the default tags.
In “Code View” mode, it has been modified not to check the format duplicate.

v2.40.0 (06/08/2021)

Bugfix

v2.39.0 (05/16/2021)

The onResizeEditor event has been added.
Improved tag indent and line break in code view mode.
Fixed a bug that TypeScript build fails.
Fixed a bug when paste from “Notepad” displayed
tag.
Fixed a bug that HTML converter.
XSS attack vulnerability fixes.

v2.38.10 (05/11/2021)

“Font” and “Size” have been modified to display default values.
Fixed a bug where the text style was not maintained when entering the enter key at the end of the text.

v2.38.8 (05/07/2021)

Fixed a bug where line breaks disappear when pasting.

v2.38.7 (05/06/2021)

When pasting an external image or video, a bug that sometimes the element was not properly added has been fixed.
Fixed a bug in which the default action was not canceled even when returning false in the user event.

v2.38.6 (05/04/2021)

The user event location has been modified so that the current event action can be canceled by a user event.

v2.38.5 (04/28/2021)

Fixed a bug where the other text style was not removed when the font-size style was applied.

v2.38.4 (04/28/2021)

Fixed a bug that core.insertNode() is creates a new line when inserted in the middle of the string has been confirmed.
Fixed a bug that TypeScript build fails.
Fixed a bug where the default color of the font was not applied properly.

v2.38.4 (04/17/2021)

The addTagsWhitelist option has been updated to support tags with a dash(-) in the name.

v2.38.3 (04/16/2021)

When pasting an external image or video, a bug that sometimes the element was not properly added has been fixed
XSS attack vulnerability fixes.

v2.38.1 (04/11/2021)

The “z-index” and “position” properties of options.defaultStyle have been modified to be applied to the top div.
Fiexed a bug where KaTeX rendering was broken, since 2.37.4 version.

v2.38.0 (04/11/2021)

Added printTemplate option
Adapt module export for Typescript 2.6
Updated Typescript definitions
Modified the anchor module to can use the “tel:” and “sms:”
Fiexed “Request-Headers” error at the ImageGallery
Added media component exception handling
Fixed a bug where tag would render when pasting text containing HTML tags
Fixed a bug that focusing on the editor when using the core.setContents() method

v2.37.4 (04/01/2021)

XSS attack vulnerability fixes

v2.37.3 (03/30/2021)

Fixed a bug in which the attribute values of the tag were converted not conforming to the HTML syntax.
Fixed a bug that focused on the editor when using the core.setContents() method.

v2.37.2 (03/29/2021)

Fixed a bug losing line break and attr when pasted.
Modified list alignment default style to “outside”.

v2.37.1 (03/19/2021)

Fixed IE syntax error.
Fixed a bug where the super/subscript toggle did not work after updated v.2.35.0.

v2.37.0 (03/17/2021)

It has been improved to be able to select an internal header tag when entering a bookmark in the anchor module.
Added more options
Fixed bugs

v2.36.5 (03/05/2021)

Added _printClass option to define the class of print and preview.
Fixed a bug in which changing the lang option did not work with the setOptions() method.
Fixed a bug in which activation/deactivation of the indent icon did not work properly.
Fixed a bug when adding components such as images and videos from the horizontal line, a bug that was added at the wrong location.
Katex has been modified to always operate in LTR mode.

v2.36.4 (02/21/2021)

Fixed a bug where the link of the image disappeared when returning to the WYSIWYG mode from the code view mode
Fixed a bug in which the size of the rotated image or video was not properly adjusted
When enviroment “shadowRoot”, the location error of the toolbar and menu has been fixed

v2.36.3 (02/19/2021)

Fixed a bug in which the size of the rotated image or video was not properly adjusted.

v2.36.2 (02/18/2021)

Bugfix
Hebrew (he) translation added
Italian(it) translation fixed

v2.36.1 (02/01/2021)

Fixed a bug in which buttons that were disabled when selecting a component were reactivated.
Fixed a bug where the current color was not displayed on the input of the color selector.

v2.36.0 (01/29/2021)

Modified to can use the use of “mailto:” at the link module.
linkRelDefault option has been added.
mediaAutoSelect option has been added.
A “download link” check box was added to the link module.
The link module`s “rel” option has been modified to enable duplicate selection.
The protocol display of the link module has been improved.
Bugfix

v2.35.1 (01/22/2021)

Fixed a bug where table cell split did not work.
Fixed a bug in which content was pasted as an image when pasting from MS Word and Excel.

v2.35.0 (01/19/2021)

Swedish (se) translation added.
Ukrainian (ua) translation added.
You can enter “nonbreaking space character”. Windows: Ctrl + Shift + Space. Mac: Option(⌥) + Shift + Space
The textTags option has been added.
A bookmark button has been added to the link plugin.
The linkRel option has been added.
The fullScreenOffset option has been added.
Added setIframeContents, blur method to the core.
Empty array values are allowed in the buttonList.
Save button shortcut has been added.
“dir” argument has been added to the core.isEdgePoint method.
Removed the core.eventStop method.
Added options property to the core.
Bugfix

v2.34.3 (11/12/2020)

When switching from the “code view mode” or when using core.setContents or core.appendContens(), a bug in which HTML classes etc. disappeared has been fixed.
A bug in which the tag related whitelist option was not properly applied has been fixed.

v2.34.3 (11/12/2020)

Added defaultTag option
When Nullish value is given as an argument of core.setContents(), the default tag is also removed
Fixed an XSS attack vulnerability
Bugs fixed

v2.34.2 (11/11/2020)

fix: whitelist

v2.34.1 (10/31/2020)

Modified so that the toolbarContainer option can be used in balloon mode
Shortcuts text of tooltip have been modified to make them more visible
Modified so that the same buttonList object can be used in two or more editors
Bugfix

v2.34.0 (10/18/2020)

Added rtl(Right to Left) option
Added previewTemplate option was added
Modified to allow other 200 range success responses when uploading files
Paste and drop event parameters have been modified
Bugfix

v2.33.3 (09/18/2020)

Hotfix

v2.33.2 (09/16/2020)

Bugs fixed

v2.33.1 (09/06/2020)

Bugs fixed

v2.33.0 (09/04/2020)

Added more translations and options.
Enhancement and bugfix.

v2.32.1 (07/23/2020)

A bug that the onload event was not worked has been fixed.

v2.32.1 (07/23/2020)

A bug that the onload event was not worked has been fixed.

v2.31.2 (07/20/2020)

Added audioTagAttrs, videoTagAttrs, and videoIframeAttrs options
Added onCopy and onCut events
Added Copy(ctrl+c) and cut(ctrl+x) event of components such as images, video, and audio

v2.31.2 (07/15/2020)

Added Vimeo as a target for video URLs.
Updated to be able to register immediately using “uploadHandler” after upload is completed in “on[Image,Video,Audio]BeforeUpload”.
Fixed a bug where options.icons were not applied when using the responsive toolbar.

v2.31.1 (07/12/2020)

Fixed (re)Init Error

v2.31.0 (07/05/2020)

Added ‘value’ option
Fixed a bug where multiple images were not inserted when using “base64” encoding
Fixed a bug that lose focus on the editor after deleting the component when there were only components in the editor

v2.30.7 (07/01/2020)

fix: set defaultStyle

v2.30.6 (06/26/2020)

In the “on[Image,Video,Audio]uploadBefore” function, instead of executing the default “uploadHandler”, the image can be registered by calling the “register” method that receives the “response” object as an argument value.
Fixed a bug where the focus was on the image caption when selecting an image in Chrome.

v2.30.5 (06/25/2020)

Added closureRangeFormat format
Bugs fixed

v2.30.4 (06/21/2020)

Fixed a bug that image inserted was not worked when using imageGallery in the image modal.
Modified the button’s active class to disappear after the blur event.

v2.30.1 (06/19/2020)

Added Polish (pl) translation
Added linkProtocol option
Added “uploadHandler” argument to the [image,video,audio]UploadBefore event.
Added [image,video,audio]UploadMultiple option
Added closureFreeFormat format and options
Updated to allow drag and drop in the editor (Not working in IE)
Lots of bugs fixed

v2.30.0 (06/10/2020)

Added Romanian (ro) translation
Added image gallery
Updated buttonList feature
Added more options
Added toggleCodeView and toggleFullScreen events
Inhancenment and bugfixes

v2.29.0 (05/07/2020)

Bugs fixed

v2.28.4 (04/08/2020)

A fixed column width button has been added to the table editing controller.
A onVideoUpload event and getVideosInfo function has been added.
Bugfixes.

v2.28.3 (04/05/2020)

d.ts files have been added so that the editor can support TypeScript.
Modified the z-index of the controller to be higher than the toolbar.
Bugs fixed

v2.28.2 (04/04/2020)

Fixed a bug with text nodes disappearing when changing text style in nested lists.
Improved the display location of the balloon-toolbar and submenu when there is not enough space on the page.
Fixed a bug that sometimes the focus did not move to the end depending on the type of the inserted node in the functions.insertHTML method.

v2.28.1 (04/02/2020)

Added line breaker to add lines when there are no lines above or below the component.
The underline has been replaced from to .

Added options imageHeight and videoHeight.

Added type the “byte-html” to the charCounterType option.

Improve the consistency check before rendering the HTML in the editor.

The method of adding of the custom plugin has been improved.

Bugfix

v2.28.0 (03/22/2020)

Added icons, charCounterType, and charCounterLabel options
Added onInput event
Bugs fixed

v2.27.1 (03/21/2020)

Bugs fixed

v2.27.0 (03/20/2020)

Bugs fixed

v2.26.0 (03/11/2020)

Added balloon-always mode.
Added a math plugin that uses the “KaTeX” library.
The katex option added.
Added nested lists feature.
Added a blockquote command plugin.
The method of adding a custom formatBlock and the class name have been modified. (“freeFormat” added)
The pre(code) tag format has been modified to match that of other editor. (Like Froala editor)
The formatBlock has been modified so that the name of the format menu is displayed instead of the tag.
The toolbar no longer appears when the focus is on a table when in balloon mode.
Added onBlur and onFocus events.
Added addTagsWhitelist, pasteTagsWhitelist and attributesWhitelist options to possible edit the whitelist in the editor.
Added onImageUploadBefore and imageUploadHandler functions.
The “core” object has been added to the arguments of events and functions.
Added functions and hasFocus to the “core” object.

v2.25.0 (01/16/2020)

German(de) translation has been fixed.
Added the onload event.
Fixed a bug that position of placeholder to be incorrect when opening a notice.
Fixed a bug that focus to disappear after text align.
Fixed bug where text was not aligned in IE browser.

v2.24.0 (01/15/2020)

German(de) translation has been fixed.
Modified anchor tag to remain un split when changing text nodes of an anchor tag.
Toolbar-related methods have been added.
Bugs fixed

v2.23.4 (12/22/2019)

Fixed a bug where the history stack did not change when characters were deleted in version 2.23.3

v2.23.3 (12/20/2019)

Changed the “selection” object to be deleted when selecting an image or video component.
Modified to give focus to the first TD when creating a table.
Added an “element” attribute that is an element of an image tag to “imagesInfo”.
Added the “notHistoryPush” argument to the core.insertComponent method.
Added removeRange, selectComponent, focusEdge method to core object.
Bugs fixed.

v2.23.1 (12/13/2019)

Added “ignoreChangeEvent” argument to history.reset method.
Added Spanish(es) translation.

v2.23.0 (12/12/2019)

Enhancement & bugfixed

v2.22.0 (12/03/2019)

Improved to minimize duplicate tags when tags are added, changed or deleted.
Added “textStyle” and “paragraphStyle” plugins.
The unlink button has been added to the “link” plugin.
Added “imageSizeUnit” and “imageRotation” options.
Improved line breaks and indents in Code view mode.
Modified to cancel with ESC key while resizing images and videos.
Fixed the “iframeCSSFileName” option to use arrays.
The custom format attribute names for the “formats” option have been changed.
The “PRE” format tag has been fixed to do not create scroll.
The copyTagAttributes and isSameAttributes methods have been added to the util object.
The core.nodeChange method has been improved.

v2.21.2 (11/16/2019)

Improved line breaks in tags in Code view mode.
Bugs fixed.

v2.21.1 (11/12/2019)

Fixed the line format to be initialized to paragraph tag after remove attributes when the backspace key is pressed when there is no content in the editor.
Fixed the style of the line format(H1, P, List.. etc.) to be maintained when the line format is changed.
(text-align, line-height.. etc).
Fixed a bug where the history stack did not work properly when the “fullPage” option was true.
The “onlyContents” argument has been added to the “getContents” method.

v2.21.0 (11/11/2019)

Fixed French translation
After creating the editor, the user object has been modified to allow access to the core and util objects.
(Now can redefine the method after creating the editor.)
Added “lineHeight” plugin and button.
Added “lineHeights”, “fontSizeUnit” options.

v2.20.1 (10/15/2019)

Fixed a bug where adding a placeholder option with the setOptions method did not result in a placeholder.
Fixed a bug that did not update the history stack after calling removeNode method.
Fixed a bug in which the position value of the resize module such as an image was calculated incorrectly

v2.20.0 (10/11/2019)

Added placeholder option.
Bugfixed.

v2.19.1 (09/30/2019)

Fix usage when the Editor is rendered in a popup window.
Fixed the link generation after selecting the text range.
Fixed a bug where paste (ctrl + v) was empty when cutting or copying text wrapped with the return line (shift + enter) in Firefox.
Added “iframe”, “pullPage”, “iframeCSSFileName” options.
Added “position” option.
Added “codeMirror” option.
Added “onPaste” and “showInline” event to functions.
The “formats” option has been modified to use custom tag as well.
Switch spelling from hilite -> highlight.
A bug that did not apply negative values to the sticky toolbar option has been fixed.
The class name of suneditor-contents has been modified.
The addDocEvent, removeDocEvent methods, _wd, and _ww objects have been added to core.
The getOffset method in util has been modified.

v2.18.0 (08/08/2019)

Added setOptions method.
Added Template plugins.
Added sort and caption buttons to the resizing module.
The icons in the editor has been changed.
Fixed the “on” method to be called when calling a submenu on “core”.
The default width of “toolbar” has been changed from “max-content” to “auto”.
When using the “appendContents” and “setContents” functions, the content is added to match the editor’s format.
Added “setContents” method to “core” object.
Bugs fixed.

v2.17.3 (07/23/2019)

Added the sort button to the resizing module.
Fixed a bug where the width of the image was intermittently 0 when uploading images from “insertImage”.
Added “access denied” error exception handling to “getPageStyle” method.

v2.17.1/2 (07/22/2019)

Added The “insertImage” method to upload images outside the editor.
Added “imageUploadSizeLimit” option to limit image upload size.
Fixed a bug that image caption was set z-index higher than toolbar.

v2.17.0 (07/21/2019)

The color picker has been modified to look natural when you change the color list.
Added “formats” option to change list of formatBlock.
Added “charCounter” option to show the current number of characters in the bottom bar.
Added “maxCharCount” option to limit the number of characters in the editor.
Added “minWidth” and “maxWidth” options.
When pasting images and videos, modified to convert to the format of the editor.
Modified to update the status of “imagesInfo” also when deleting an image by selecting a range.
Fixed a bug where the getContents method returned an empty value when there was no text in the editor.
Fixed a bug where pasted iframe tags did not resize correctly.
Fixed a bug that the history stack was not immediately updated when an image was deleted.
Fixed a bug where the link’s controller was rendered in the wrong position when the link was in the heading tag.
Fixed a bug where attributes of HTML were copied when adding text by dragging drop.
Modified to operate only backspace, delete, and enter keys when sizing module is active.
The getOffset method of the util object has been improved.

v2.16.3 (07/06/2019)

Replaced the zeroWidthSpace that was entered when creating an line with the br tag.
Added an activation effect to the FormatBlock list menu.
Added an activation effect to the List button.
Modified color selector design slightly.
Fixed a bug where table cells were selected when scrolling on mobile.
Fixed a bug that the return value of the getListChild and getListChildNodes methods of the util object contained br tags.
Fixed a bug that the max size, min size icons of the table controller did not display properly.
Added exception handling related to the br tag to nodeChange method of the core object.

v2.16.2 (07/03/2019)

Russian translation added.
The “print” and “preview” features has been improved.
Fixed a bug where the value of the “height” option was applied when the “minHeight” option value was entered as a numeric type.
The openWindowContents method has been removed from the core object and the print and preview methods have been added.
Deleted the code that calls notice when an error occurs during image upload. (Error message call during server upload is the same as before.)
Added getPageStyle method to util object

v2.16.0 (06/30/2019)

Update

v2.15.3 (06/02/2019)

Added imageUploadHeader option.
Fixed to remove the current line if there is image, video etc in the next line when using Delete key on blank line.
After selecting image and video components, component is moved down when enter key is pressed.
After selecting images and video components, the components are deleted when delete or backspace key is pressed.
When adding components such as table, image, and HR in the list, modified it to be added inside the LI tag.
Fixed to remove list and apply format tag when using format tag in list.
Fixed an error that was not working when editing the pasted image for the first time.
Fixed a bug where the enter key did not work when using pre, quotblock in figuare tag since v2.15.0.
Fixed bugs in list and format plugins and added exception handling.
Fixed a bug where the format tag inside was erased when the text node was modified when the format tag was in format tags such as p, div, h1-6, li.
And Several other bugs fixed.
Added insertComponent, getSelectedElementsAndComponents methods to core object.
Added ignoreNodeChange, getNodePath, getNodeFromPath methods to util object.
Updated core-nodeChange method.

v2.15.2 (05/23/2019)

French translation added.
A min size (auto), max size (100%) button has been added to the controller in the table.
The table controller has been modified to appear in two places, at the top of the table and in the cell.
When using a list, the list is merged if list is above or below it.
It has been modified to be added to the list when using hr in the list.
It has been modified to be added outside of the list when using pre, blockquote in the list.
When using pre, blockquote, it applies based on the outermost node in the current selection range.
Added maxSize and minSize entries to the Language file.
After adding a block, the action to add a format to the line below has been removed.
Fixed a bug that caused the toolbar to have a margin when using full screen in Sticky Toolbar mode.
Fixed bugs when in list adding and deleting items.
Fixed a bug where cells in tables were not displayed correctly intermittently.
Fixed a bug where the margin space was applied to the entire editor when using the tab key or indent key outside the table.
Fixed a bug where the list removal range was applied to all items in the list when the backspace key was pressed at the first end of the list.
Fixed a bug that was not recorded in history stack when using tab key.
Fixed a bug in the activation buttons.
Fixed a bug that removed blank lines when changing nodes after selecting all.
Fixed a bug to keydown event, node change.
The colorPicker module design has been modified.
The design of the resizing, link, table controllers has been modified.
The style of the Pre, blockquote tag has been modified.
Fixed an exception of browsers by setting scope directly in editor when using shortcutkey (CTRL + A).
Added removeItemAllParents, getElementDepth, isTable method of Util object.
Added color to title of the table.
Added isList and isListCell methods to Util object.
Modified the condition of format elements.
Modified correctly a regular expressions that can cause bugs.
Modified the util.convertHTMLForCodeView method.
Modified the core.detachRangeFormatElement, core.applyRangeFormatElement method.
Deleted getSelectedRangeFormatElements method of Util object.

v2.14.0 (05/04/2019)

modify: range format exit with enter
add: onChange function, button – disabled,

v2.13.1 (04/23/2019)

Updated undo and redo functions, which previously operated as “document.execCommand”.
Added getPositionIndex function to “util” object.
Fixed a bug “insertHTML” of user function.
Fixed a bug where format blocks, images and videos could not be deleted properly with backspace.
Modified the color and border radius of the editor.
Added “redo” and “undo” to buttons that are disabled in code view mode.
Added History object to “core” object for undo, redo.
Added onlyZeroWidthSpace function to “util” object.

v2.13.0 (04/22/2019)

Updated undo and redo functions, which previously operated as “document.execCommand”.
Added getPositionIndex function to “util” object.
Fixed a bug “insertHTML” of user function.
Modified the color and border radius of the editor.
Added “redo” and “undo” to buttons that are disabled in code view mode.
Added History object to “core” object for undo, redo.

v2.12.4 (04/17/2019)

Enhancement: The color picker module highlights the selected color.
Fixed a bug where the icon was not visible when adding custom buttons. customPlugin
Fixed a bug that did not resize the component’s cover when putting the description after resizing the image and video.

v2.12.3 (03/22/2019)

Fix a bug that the hex color input field of the colorPicker module was not working since version 2.9.4.
Fixed a bug where when using the dialog plugin after creating more than one editor, the results were applied to the editor that had the focus before.
Fixed Print did not work since version 2.8.3.
Fixed Inline, Balloon mode did not work properly since version 2.12.1.
Deleted the selected cell style in the table.
Added z-index to controllers

v2.12.0 (03/21/2019)

The language file has been modified to be added to the global object SUNEDITOR_LANG when used in HTML.
Added Chinese(zh_cn) translation.

v2.11.0 (03/19/2019)

Added youtubeQuery option – the query string of a YouTube embedded URL.

v2.11.0 (03/17/2019)

Added onImageUploadError event function – called when the image is upload failed.
Added argument imageInfo to onImageUpload function.
Added Japan translation.
Fixed a bug where the height value was fixed when adding the first image.

v2.10.2 (03/14/2019)

Fixed a bug where characters would disappear intermittently when changing nodes.
Added german translation.
Added save-button and ‘callBackSave’ option.
Added src property to ‘imagesInfo’.

v2.9.6 (02/07/2019)

fix: btn-group style, focus bug
Fixed a bug that the focus was not updated in the editor when submenu and dialog menus were used.

v2.9.5 (01/14/2019)

fix: font size display

v2.9.4 (12/14/2018)

fix: node change function

v2.9.3 (12/13/2018)

modify: balloon editor event
fix: dialog submit, modify: submenu, controller off

v2.9.2 (12/12/2018)

fix: strike shortcut key, balloon editor ctrl + a

v2.9.1 (12/11/2018)

fix: node change – checked multi styles

v2.9.0 (12/11/2018)

fix: window event exception handling

v2.8.5 (11/26/2018)

fix: nodeChange exception
delete: styleWithCss

v2.8.4 (11/22/2018)

bugfix

v2.8.3 (11/22/2018)

update

v2.8.2 (11/20/2018)

fix: figcaption contenteditable

v2.8.1 (11/15/2018)

fix: node change, clipboard data

v2.8.0 (11/11/2018)

fix: rotate caption

v2.7.0 (11/06/2018)

fix: pre tag overflow

v2.6.3 (11/05/2018)

fix: code view – textarea
fix: percent size
fix: code view – textarea

v2.6.1 (10/30/2018)

fix: code view button blur
add option – resizingBar

v2.5.3 (10/28/2018)

Bugfixes

v2.4.3 (10/25/2018)

modify: util – getOffset, defaultCommand -> commandHandler
fix: check description when editing image
modify: fullscreen icon

v2.4.2 (10/19/2018)

modify: button module, line break, button style
modify: indent function

v2.4.0 (10/18/2018)

added: resizing module – rotate
fix: default display
fix: editor object

v2.3.2 (10/16/2018)

fix: disabled, enabled, appendContents, setContents

v2.3.1 (10/11/2018)

fix: wrapToTags, appendContent, resizin, modify: preview, jshint

v2.3.0 (10/08/2018)

modify: arrow css

v2.2.7 (10/04/2018)

modify: button style, fix: contents style

v2.2.6 (10/02/2018)

fix: node change function – same node

v2.2.5 (10/02/2018)

fix: node change function

v2.2.4 (09/28/2018)

fix: image – xmlHttp, modify, loading box

v2.2.2 (09/27/2018)

fix: mobile event, submenu, callModule
fix: core – manage tags in delete operation
fix: getRange, image insert
fix: display option, tree shaking
update: dialog module split -> dialog, resizing
fix: Applied “getFormElement” to indent and node function
fix: codeView, modify: codeView css, convertContentsForEditor, user func
update: button disabled in codeView, added hr icon, modify: contents.css
fix: font css of edit area
update: table cell controller, modify: language, fonts, css
fix: a tag css
fix: wrapRangeToTag

v1.11.4 (08/31/2018)

fix: context – delete originElementDisplay, added navigation

v1.11.2 (08/29/2018)

delete: SUNEDITOR.destroy

v1.11.1 (08/29/2018)

fix: wrapRangeToTag function

v1.11.0 (08/28/2018)

update: label path (showPathLabel), User function : getContext; fix: when format tag deleted, format tag check

v1.10.4 (08/22/2018)

fix: horizontalRules menu, _findButtonEffectTag performance

v1.10.3 (08/22/2018)

fix: svg->web font, button effects, optimizations

v1.10.2 (08/17/2018)

fix: video module

v1.10.1 (08/17/2018)

fix: Firefox, Opera window.event

v1.10.0 (08/16/2018)

update: image, video module – resizing, revert, constrain proportions

v1.9.0 (08/12/2018)

added show blocks button

v1.8.2 (08/11/2018)

update: module box line break,
fix: preivew viewport

v1.7.2 (08/11/2018)

update: subscript, superscript

v1.6.2 (07/19/2018)

fix: link openDialog

v1.6.0 (07/16/2018)

update: added image resize controller – left

v1.4.0 (07/15/2018)

update: formats

v1.3.1 (07/14/2018)

fix: setContent, getContent, added _convertContentForEditor function
fix: css z-index

v1.3.0 (06/29/2018)

update: added image – Alternative Text

v1.2.4 (06/25/2018)

fix: creating paragraph tags

v1.2.3 (06/12/2018)

bugfix.

v1.2.0 (05/24/2018)

more functionalities added.

The post Minimal WYSIWYG Editor In Pure JavaScript – Suneditor appeared first on CSS Script.

Two Direction Sticky Sidebar For Vanilla JS

CSS Script — Tue, 21 Apr 2026 05:07:59 +0000

Two Direction Sticky Sidebar is a pure JavaScript utility that implements bi-directional sticky sidebar behavior in your web page:

When the sidebar fits inside the viewport, it sticks at the top as expected.
When the sidebar content is taller than the viewport, it scrolls in sync with the user’s direction and locks to either the top or bottom edge of the screen once content runs out.

Features:

Creates a sticky sidebar for long content pages.
Supports two-way sidebar scroll behavior.
Keeps tall sidebar content accessible during page scroll.
Sets custom top spacing.
Sets custom bottom spacing.
Disables sticky behavior on small screens.
Updates sidebar positioning after live option changes.
Uses native browser APIs.
Supports legacy sticky markup.
Refreshes layout metrics after resize.

How to use it:

1. Include the Two Direction Sticky Sidebar’s JavaScript on the page.

2. Add the data-sticky-sidebar attribute to your sidebar. The script queries for this attribute on initialization.


  
    Articles
    Tutorials
    Tools

3. Pass configuration directly in HTML. All available HTML data attributes:

data-top-gap (integer or "auto"): Margin in pixels between the top of the viewport and the sidebar during sticky mode. Defaults to 0. Pass "auto" to use the sidebar’s computed document offset on page load.
data-bottom-gap (integer): Margin in pixels between the bottom of the viewport and the sidebar. Defaults to 0.
data-mobile-width (integer): Screen width in pixels at or below which the sticky effect turns off. Defaults to 0, meaning sticky stays active at all viewport widths.

Alternatives:

10 Best Sticky Sidebar Plugins In JavaScript

FAQs:

Q: Does this library work with multiple sidebars on the same page?
A: No. The library works only the first matching element it finds.

Q: The sidebar snaps to an incorrect position when the page loads. How do I fix this?
A: This usually happens when the sidebar sits below a fixed header. Set data-top-gap="auto" to tell the script to calculate the initial offset from the sidebar’s actual position in the document.

Q: Can I update the gap values after the page has loaded?
A: Yes. Update data-top-gap or data-bottom-gap directly on the element via JavaScript. The MutationObserver inside the script detects attribute changes and reinitializes with the new values automatically.

Q: Does the sticky behavior break inside CSS Grid or Flexbox layouts?
A: No. The script sets position: sticky and height: fit-content on the sidebar element. These apply correctly inside flex and grid containers as long as the sidebar’s parent container is taller than the sidebar itself.

Q: What happens if data-mobile-width is not set?
A: Sticky behavior stays active at all viewport widths. Set it to a pixel value such as 1024 to disable the effect on screens narrower than that breakpoint.

The post Two Direction Sticky Sidebar For Vanilla JS appeared first on CSS Script.

Linked Lists with CSS Anchor Positioning

CSS Script — Tue, 21 Apr 2026 04:11:01 +0000

Linked Lists is a JavaScript & CSS UI component that connects multiple checked list items to a selected radio option with dashed relation lines.

It’s ideal for settings panels, workflow maps, and form steps where the current choice needs a visible path back to its related items.

Features:

Based on the native CSS anchor-positioning API.
Supports multiple simultaneous connections, each scoped independently to its own source element.
Draws two-segment connectors that route automatically based on whether the source sits above, below, or at the same vertical level as the target.
Full theming control through CSS custom properties for line color, stroke width, corner radius, and panel gap.
Position-aware connector geometry adjusts curve direction and corner rounding per segment for each positional case.
All connector layout and geometry run in CSS.
Automatic fallback message displays in legacy browsers.

How to use it:

1. Create two

.items

.options

2. Add the CSS. The two anchoring rules are the heart of the pattern. anchor-name: --checked-option on the checked checkbox label registers it as the connector’s source point. anchor-name: --radio-option on the checked radio li registers it as the target. All segment edges are derived from the anchor() function referencing those two named points.

@layer base, demo;

@layer demo {
  .linked-list {
    /* — Theming variables — adjust to match your design system — */
    --checkbox-checked-border-color: dodgerblue;
    --radio-checked-border-color: dodgerblue;
    --join-stroke: 1px;
    --join-line: var(--join-stroke) dashed dodgerblue; /* Connector line style */
    --join-radius: 20px;  /* Corner rounding on L-shaped bends */
    --gap: 10vw;          /* Horizontal gap between the two columns */

    position: relative;
    display: grid;
    align-items: start;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    width: min(100%, 800px);
    gap: var(--gap);
  }

  .list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
  }

  .list > li {
    border: 1px solid var(--clr-lines);
    display: flex;
    align-items: center;
  }

  .list > li > label {
    flex: 1;
    padding: .5rem;
    cursor: pointer;
  }

  /* Checked checkbox label registers as the named anchor source */
  .list.items li:has(:checked) label {
    anchor-name: --checked-option;
    /* anchor-scope scopes this name to the local subtree so multiple
       checked checkboxes each get their own independent anchor chain */
    anchor-scope: --checked-option;
    border-color: var(--checkbox-checked-border-color);
  }

  /* First segment: spans from the right edge of the checkbox to the midpoint column */
  .list.items li:has(:checked) label::before,
  .list.items li:has(:checked) label::after {
    content: '';
    position: absolute;
    border: var(--join-line);
    right: calc(anchor(left --radio-option) + var(--gap) / 2);
    left: anchor(right --checked-option); /* Left edge aligns to checkbox right */
  }

  /* Second segment: spans from the midpoint column to the left edge of the radio option */
  .list.items li:has(:checked) label::after {
    right: anchor(left --radio-option);
    left: calc(anchor(left --radio-option) - var(--gap) / 2 - var(--join-stroke));
  }

  /* — Routing case 1: checkbox sits ABOVE the radio button — */
  @container style(--relation: -1) {
    .list.items li:has(:checked) label::before {
      border-left-color: transparent;
      border-bottom-color: transparent;
      border-radius: 0 var(--join-radius) 0 0; /* Rounds the top-right corner */
      top: anchor(center --checked-option);
      bottom: anchor(top --radio-option);
    }
    .list.items li:has(:checked) label::after {
      border-right-color: transparent;
      border-top-color: transparent;
      border-radius: 0 0 0 var(--join-radius); /* Rounds the bottom-left corner */
      top: calc(anchor(top --radio-option) - var(--join-stroke));
      bottom: anchor(center --radio-option);
    }
  }

  /* — Routing case 2: checkbox sits BELOW the radio button — */
  @container style(--relation: 1) {
    .list.items li:has(:checked) label::before {
      border-left-color: transparent;
      border-top-color: transparent;
      border-radius: 0 0 var(--join-radius) 0; /* Rounds the bottom-right corner */
      top: anchor(bottom --radio-option);
      bottom: anchor(center --checked-option);
    }
    .list.items li:has(:checked) label::after {
      border-right-color: transparent;
      border-bottom-color: transparent;
      border-radius: var(--join-radius) 0 0 0; /* Rounds the top-left corner */
      top: anchor(center --radio-option);
      bottom: calc(anchor(bottom --radio-option) - var(--join-stroke));
    }
  }

  /* — Routing case 3: checkbox and radio share the same vertical index — */
  @container style(--relation: 0) {
    .list.items li:has(:checked) label::before {
      /* Straight horizontal connector — no bends or radius needed */
      border-top-color: transparent;
      border-right-color: transparent;
      border-left-color: transparent;
      border-radius: 0;
      top: calc(anchor(center --radio-option) - var(--join-stroke));
      bottom: calc(anchor(center --checked-option) + var(--join-stroke));
      right: anchor(left --radio-option);
      left: anchor(right --checked-option);
    }
    .list.items li:has(:checked) label::after {
      display: none; /* Second segment is not needed for a straight line */
    }
  }

  /* Checked radio option registers as the named anchor target */
  .list.options li:has(:checked) {
    anchor-name: --radio-option;
    border-color: var(--radio-checked-border-color);
  }
}

/* — Base layer: general layout and color-scheme — */
@layer base {
  * { box-sizing: border-box; }

  :root {
    color-scheme: light dark;
    --bg-dark: rgb(16, 24, 40);
    --bg-light: rgb(248, 244, 238);
    --txt-light: rgb(10, 10, 10);
    --txt-dark: rgb(245, 245, 245);
    --line-light: rgba(0 0 0 / .25);
    --line-dark: rgba(255 255 255 / .25);

    /* light-dark() picks the first value in light mode, second in dark mode */
    --clr-bg: light-dark(var(--bg-light), var(--bg-dark));
    --clr-txt: light-dark(var(--txt-light), var(--txt-dark));
    --clr-lines: light-dark(var(--line-light), var(--line-dark));
  }

  body {
    background-color: var(--clr-bg);
    color: var(--clr-txt);
    min-height: 100svh;
    margin: 0;
    padding: 2rem;
    font-family: "Jura", sans-serif;
    display: grid;
    place-content: center;
    gap: 2rem;
  }

  /* Fallback notice for browsers without anchor-positioning support */
  @supports not (position-anchor: --test) {
    body::before {
      content: "Your browser does not support CSS anchor-positioning";
      position: fixed;
      top: 2rem;
      left: 50%;
      translate: -50% 0;
      font-size: 0.8rem;
    }
  }
}

3. Determine whether each checkbox row sits above, below, or at the same index as the currently selected radio option, then write that relationship as a CSS custom property.

const root = document.querySelector('.linked-list');

// Maps the three possible Math.sign() outputs to CSS --relation values
// Index 0 = above (-1), Index 1 = same (0), Index 2 = below (1)
const REL = ['-1', '0', '1'];

function updateRelations() {
  // Find the currently selected radio option row
  const radioLi = root.querySelector('.options li:has(input:checked)');
  if (!radioLi) return;

  // Get the zero-based position of that row in the radio list
  const radioIndex = [...radioLi.parentElement.children].indexOf(radioLi);

  // Write --relation to every checkbox row based on its position vs. the radio
  root.querySelectorAll('.items li').forEach((li, i) => {
    // Math.sign returns -1 (above), 0 (same level), or 1 (below)
    // Adding 1 shifts the result to 0, 1, or 2 for array indexing
    li.style.setProperty('--relation', REL[Math.sign(i - radioIndex) + 1]);
  });
}

// Re-run on any radio or checkbox change inside the container
root.addEventListener('change', updateRelations);

// Set the initial --relation values on page load
updateRelations();

The post Linked Lists with CSS Anchor Positioning appeared first on CSS Script.

Modern Image Crop Web Component – VanillaJCrop

CSS Script — Tue, 21 Apr 2026 02:40:44 +0000

VanillaJCrop is an image cropping library that replaces the classic JCrop jQuery plugin in pure ES6+ JavaScript.

It comes with two integration modes: a declarative Web Component and a programmatic headless API.

Both modes handle mouse, touch, and pen input through the Pointer Events API, and the component scopes all its styles inside Shadow DOM to prevent conflicts with your page CSS.

Features:

No external dependencies.
A native Web Component for HTML-attribute-based configuration.
A headless API that separates core crop logic from the rendering layer.
Handles mouse, touch, and pen input through the Pointer Events API.
Keyboard navigation moves selections with arrow keys and cancels with Escape.
Aspect ratio locking constrains crop areas to any fixed ratio, such as 16:9, 4:3, or 1:1.
Minimum and maximum dimension constraints keep selections within defined pixel bounds.
Animated transitions move the selection box smoothly from one position to another.
Full appearance customization through CSS custom properties on the component element.

How to use it:

1. Download the package and import it as a local module.

2. Add the custom element to your HTML with the src attribute pointing to your image. Constraints like ratio and min-width go directly on the element as attributes:

src (string): Image source URL. Example: src="photo.jpg".
ratio (number | fraction): Aspect ratio for the selection. Accepts a number or fraction string. Example: ratio="16/9" or ratio="1.5".
min-width (number): Minimum selection width in pixels. Example: min-width="100".
min-height (number): Minimum selection height in pixels. Example: min-height="100".
max-width (number): Maximum selection width in pixels. Example: max-width="500".
max-height (number): Maximum selection height in pixels. Example: max-height="500".
disabled (boolean): Disables all interaction. Example: disabled.
selection (string): Sets the initial selection in image coordinates as x,y,x2,y2. Example: selection="100,50,400,300".
grid (boolean): Shows a rule-of-thirds grid inside the selection. Example: grid.
crosshair (boolean): Shows a center crosshair inside the selection. Example: crosshair.
no-move (boolean): Locks the selection position and disables dragging. Example: no-move.
no-resize (boolean): Locks the selection size, hides resize handles, and disables drawing a new selection. Example: no-resize.
outside-click (string): Controls what happens when the user clicks outside the selection. Use release to clear the selection or ignore to keep it unchanged. Default: release. Example: outside-click="ignore".

3. You can also control the widget through its JavaScript API. Grab the element by reference and call methods directly:

const widget = document.querySelector('jcrop-widget');

// Read the current selection as { x, y, w, h, x2, y2 } in image coordinates
console.log(widget.value);

// Set a new selection immediately
widget.setSelection({ x: 40, y: 40, x2: 380, y2: 290 });

// Animate to a new selection; optional callback fires on completion
widget.animateTo({ x: 100, y: 80, x2: 520, y2: 400 }, () => {
  console.log('Transition complete');
});

// Clear the active selection
widget.release();

// Destroy the widget and remove all event listeners
widget.destroy();

4. The headless API is the right choice when you need crop logic on an existing DOM container or inside a custom canvas pipeline. Pass your element and a configuration object to the JCrop constructor. The imageWidth and imageHeight options map display coordinates back to actual image pixels, so read them from the image element rather than hardcoding.

import JCrop from './src/index.js';

// Attach JCrop to a container element
const jcrop = new JCrop(document.getElementById('crop-stage'), {
  canvasWidth: 720,    // display width of the rendered crop area
  canvasHeight: 480,   // display height of the rendered crop area
  imageWidth: 2160,    // actual pixel width of the source image
  imageHeight: 1440,   // actual pixel height of the source image
  ratio: 3 / 2,        // lock to a 3:2 aspect ratio
  minWidth: 120,
  minHeight: 80,
  maxWidth: Infinity,
  maxHeight: Infinity,
  fadeTime: 400,
  handleWidth: 10,
  handleHeigh: 10,
  onChange: (coords) => {
    // Fires on every drag move during selection
    console.log('In progress:', coords);
  },
  onSelect: (coords) => {
    // Fires when the user releases the pointer
    console.log('Final selection:', coords);
    submitCropToServer(coords);
  },
  onRelease: () => {
    console.log('Selection cleared');
  }
});

// Jump the selection to a position immediately
jcrop.setSelect({ x: 60, y: 40, x2: 420, y2: 320 });

// Animate the selection to a new position
jcrop.animateTo({ x: 100, y: 70, x2: 520, y2: 410 });

// Read the current selection in image coordinates
const imageCoords = jcrop.tellSelect();

// Read the current selection in canvas (display) coordinates
const displayCoords = jcrop.tellScaled();

// Update options at runtime — useful for toggling aspect ratio on the fly
jcrop.setOptions({ ratio: 1, minWidth: 150 });

// Clear the selection
jcrop.release();

// Tear down the instance and remove all listeners
jcrop.dispose();

5. API configuration options:

canvasWidth (number): Display width of the crop area in pixels. Defaults to 800.
canvasHeight (number): Display height of the crop area in pixels. Defaults to 600.
imageWidth (number): Actual pixel width of the source image. Defaults to 1600.
imageHeight (number): Actual pixel height of the source image. Defaults to 1200.
ratio (number | null): Locked aspect ratio as a width-to-height number. Pass null for a free selection. Defaults to null.
minWidth (number): Minimum selection width in pixels. Defaults to 50.
minHeight (number): Minimum selection height in pixels. Defaults to 50.
maxWidth (number): Maximum selection width in pixels. Defaults to Infinity.
maxHeight (number): Maximum selection height in pixels. Defaults to Infinity.
fadeTime (number): Duration of animated transitions in milliseconds. Defaults to 400.
handleWidth (number): Width of resize handles in pixels. Defaults to 10.
handleHeight (number): Height of resize handles in pixels. Defaults to 10.
onChange (function): Callback that fires on every selection change. Receives a coordinates object.
onSelect (function): Callback that fires when the selection is finalized. Receives a coordinates object.
onRelease (function): Callback that fires when the selection is cleared. Receives no arguments.

6. API methods.

// Set the crop selection immediately; accepts { x, y, x2, y2 } in image pixels
jcrop.setSelect({ x: 80, y: 60, x2: 480, y2: 360 });

// Animate the selection to new coordinates
// Optional second argument is a callback fired when the animation ends
jcrop.animateTo({ x: 120, y: 90, x2: 560, y2: 410 }, () => {
  console.log('Animation finished');
});

// Return the current selection in image coordinates: { x, y, w, h, x2, y2 }
const imageCoords = jcrop.tellSelect();

// Return the current selection in canvas (display) coordinates
const displayCoords = jcrop.tellScaled();

// Clear the active selection
jcrop.release();

// Check whether an animation is currently running; returns a boolean
const active = jcrop.isAnimating();

// Stop any running animation at its current position
jcrop.cancelAnimation();

// Update one or more options at runtime; changes take effect immediately
jcrop.setOptions({ ratio: 16 / 9, minWidth: 200 });

// Destroy the instance and remove all event listeners from the DOM
jcrop.dispose();

7. Web component events.

const widget = document.querySelector('jcrop-widget');

// Fires continuously as the user drags; useful for live coordinate previews
// e.detail: { x, y, w, h, x2, y2 } in image coordinates
widget.addEventListener('crop-change', (e) => {
  console.log('Dragging:', e.detail);
});

// Fires once when the user releases the pointer and the selection is confirmed
// e.detail: { x, y, w, h, x2, y2 } in image coordinates
widget.addEventListener('crop-select', (e) => {
  console.log('Confirmed crop:', e.detail);
});

// Fires when the current selection is cleared programmatically or by the user
widget.addEventListener('crop-release', () => {
  console.log('Selection removed');
});

// Fires on errors; most common cause is a failed image load
// e.detail: { error }
widget.addEventListener('crop-error', (e) => {
  console.error('Load failure:', e.detail.error);
});

8. Customize the cropper with the following CSS variables.

jcrop-widget {
  /* Translucent shade overlay outside the selection */
  --jcrop-shade-color: rgba(0, 0, 0, 0.6);

  /* Selection border */
  --jcrop-border-color: #ffffff;
  --jcrop-border-width: 2px;
  --jcrop-border-style: solid;

  /* Resize handle appearance */
  --jcrop-handle-size: 14px;
  --jcrop-handle-color: #ffffff;
  --jcrop-handle-border: 2px solid #1a1a1a;
  --jcrop-handle-radius: 3px;
}

9. Migrating from JCrop jQuery plugin:

// ---- JCrop (jQuery) ----
$('#photo').Jcrop({
  onSelect: function(c) { console.log(c); },
  aspectRatio: 1.5
});
api.setSelect([80, 60, 480, 360]);       // array format
api.animateTo([120, 90, 560, 410]);      // array format
api.tellSelect();
api.release();
api.destroy();

// ---- VanillaJCrop (ES6+) ----
const jcrop = new JCrop(document.getElementById('photo'), {
  onSelect: (c) => console.log(c),
  ratio: 1.5
});
jcrop.setSelect({ x: 80, y: 60, x2: 480, y2: 360 });   // object format
jcrop.animateTo({ x: 120, y: 90, x2: 560, y2: 410 });   // object format
jcrop.tellSelect();
jcrop.release();
jcrop.dispose(); // renamed from destroy()

Alternatives:

10 Best Image Croppers In jQuery And Vanilla JavaScript

Changelog:

v0.2.2 (04/20/2026)

Bugfixes

The post Modern Image Crop Web Component – VanillaJCrop appeared first on CSS Script.

UX-First CSS Foundation for Modern Web – Browserux.css

CSS Script — Tue, 21 Apr 2026 02:40:10 +0000

browserux.css is a minimal CSS library that enhances native HTML and CSS behaviors into a clean, modern baseline for improved usability and accessibility. Think of it as a thoughtful evolution of `normalize.css`, built with current UX and accessibility best practices in mind.

The main idea here is to address those initial browser inconsistencies and enhance the user experience from the ground up. It tackles things like default form styling, scrollbar appearance, text selection, and focus states, all while respecting user preferences like dark mode or reduced motion.

Features:

CSS Reset: A targeted reset that handles margins, paddings, box-sizing, and sensible defaults for lists, buttons, and media.
Cross-Browser Normalization: Standardizes typography, form elements, and media rendering for a more consistent look across modern browsers.
Enhanced Usability: Implements smooth scrolling (respecting user preferences), optimizes mobile tap handling with touch-action: manipulation, and ensures scrollbars are always visible to prevent layout jank.
Accessibility First: Natively supports prefers-color-scheme (dark mode), prefers-reduced-motion, and provides clear, keyboard-friendly :focus-visible states.
Themeable via CSS Variables: Leverages CSS custom properties extensively, making it straightforward to customize colors, typography, scrollbar styles, and more.
Styled Native Elements: Provides improved styling for text selection, scrollbars (WebKit & Firefox), form controls including validation states, and progress bars using native CSS.

How to use it:

1. Install browserux.css and import it into your project.

# NPM
$ npm install browserux.css

// In your main JS file (e.g., main.js or app.js)
import 'browserux.css/browserux.css';

/* Or in your main CSS file */
@import 'browserux.css/browserux.css';

2. You can easily create your own themes by overriding the default CSS variables.

:root {
  /* Global colors */
  --ui-page-bg: #eaeaea;
  --ui-page-color: #121212;
  --ui-color-primary: #f05e0e;
  --ui-color-secondary: #0e93f0;
  --ui-transparent: transparent;

  /* Form validation colors */
  --ui-valid-border-color: #29b94c;
  --ui-valid-bg-color: #f0fff5;
  --ui-invalid-border-color: #dc303e;
  --ui-invalid-bg-color: #fff0f0;
  --ui-placeholder-color: #aaa;
  --ui-invalid-placeholder-color: #dc303e;
  
  /* Progress bar colors */
  --ui-progress-bar-bg: #efefef;
  --ui-progress-value-bg: #29b94c;

  /* Text selection */
  --ui-selection-bg: var(--ui-page-color);
  --ui-selection-color: var(--ui-page-bg);
  --ui-selection-text-shadow: none;

  /* Scrollbar */
  --ui-scrollbar: var(--ui-page-bg);
  --ui-scrollbar-track: #ddecf6;
  --ui-scrollbar-thumb: var(--ui-color-secondary);
  --ui-scrollbar-thumb-hover: var(--ui-color-primary);
  --ui-scrollbar-vertical-width: 10px;
  --ui-scrollbar-horizontal-height: 10px;

  /* Typography */
  --ui-typo-font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --ui-typo-mono-font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
  --ui-typo-font-size: 1.6rem;
  --ui-typo-line-height: 1.6;
}

Comparison with Alternatives

normalize.css: normalize.css aims for consistent browser defaults while preserving useful ones. browserux.css builds on this philosophy by actively enhancing these defaults for better UX and accessibility. It’s more opinionated about scrollbars, focus states, and user preferences. If you want the absolute minimum intervention, normalize.css is a solid choice. If you appreciate a more polished starting point out-of-the-box, browserux.css is a step further.

Traditional reset.css : Resets are typically more aggressive, stripping nearly all default browser styling to provide a “blank slate.” This means you have to define everything from scratch. browserux.css is less destructive; it refines rather than obliterates. For projects where you want to leverage and improve upon sensible browser defaults, browserux.css is a better fit than a hard reset.

Tailwind CSS Preflight: Preflight, which is part of Tailwind CSS, is also built upon normalize.css and provides a set of base styles. However, Preflight is designed to work seamlessly within the Tailwind utility-first ecosystem. browserux.css is framework-agnostic, much lighter, and focuses purely on enhancing native browser elements without introducing a utility-class system or any opinions on how you should build components.

FAQs

Q: Is browserux.css a full UI framework like Bootstrap or Materialize?
A: No, not at all. browserux.css is a foundational CSS layer. It improves the default styling and behavior of native HTML elements. You’d typically use it as a starting point, before or alongside more comprehensive styling solutions or your custom CSS. It doesn’t provide pre-built components or utility classes.

Q: How does browserux.css handle dark mode if I have my own JavaScript-based theme switcher?
A: browserux.css uses the prefers-color-scheme: dark CSS media query to automatically adjust its internal CSS variables for a dark theme. If your JS theme switcher modifies these same CSS variables (e.g., --ui-page-bg, --ui-page-color) or your own set of theme variables that browserux.css might inherit from, they can work together. The key is that browserux.css respects the OS-level preference by default. You can always override its variables with higher specificity or directly via JS if your switcher manipulates styles that way.

Q: What if I disagree with some of its opinions, like the always-visible scrollbar?
A: Most visual aspects, like scrollbar width or colors, are controlled by CSS variables (e.g., --ui-scrollbar-vertical-width). You can override these in your own stylesheet. For behavioral styles like overflow-y: scroll; on the html element, you’d need a CSS rule with equal or higher specificity in your stylesheet, for example, html { overflow-y: auto; }. It’s generally quite straightforward to tweak.

Q: Will browserux.css conflict with my project’s existing CSS?
A: It’s designed as a base layer, so its selectors are mostly for raw HTML elements and have relatively low specificity. Conflicts are possible if your existing CSS also styles basic elements without classes or with similarly low specificity. Generally, your own class-based styles or more specific selectors should override browserux.css without issues. I’d recommend loading browserux.css before your custom stylesheets.

Q: Why does it set font-size: 62.5% on the html element?
A: This is a common technique. Assuming the browser’s default font size is 16px, setting font-size: 62.5% on html makes 1rem equal to 10px (16px * 0.625 = 10px). This can simplify converting px values to rem units in your head during development. The actual body font size is then set using var(--ui-typo-font-size), which defaults to 1.6rem (translating to 16px in this setup).

Changelog:

v4.0.0 (04/20/2026)

Major update

v3.0.0 (04/01/2026)

Update

v2.0.0 (06/07/2025)

To improve project scalability and avoid naming collisions with other libraries or design systems, all CSS variables previously prefixed with –ui- have been renamed to –bux-.

v1.0.2 (05/12/2025)

Minor fixes and cleanup

The post UX-First CSS Foundation for Modern Web – Browserux.css appeared first on CSS Script.

Self-Hosted WYSIWYG Editor in Vanilla JS – Neiki Editor

CSS Script — Mon, 20 Apr 2026 05:32:42 +0000

Neiki Editor is a vanilla JavaScript rich text editor that turns a textarea into a full-featured WYSIWYG HTML editor with a single JS call.

It supports configurable toolbars, light and dark themes, built-in localization for eight languages, and a plugin registration API for custom toolbar extensions.

Features:

Fully configurable toolbar with support for button ordering, group separators, and responsive wrapping on smaller screens.
Light and dark theme support with automatic persistence across page reloads.
Built-in localization for English, Czech, Chinese, Spanish, German, French, Portuguese, and Japanese.
Custom translation support for any language via static registration or inline config.
Find and Replace with case-sensitive search and regular expression support.
Floating toolbar appears above selected text for quick inline formatting access.
Table insertion with a right-click context menu for adding rows, columns, and merging or splitting cells.
Image insertion by URL, file upload, or direct drag-and-drop into the editor area.
Autosave to localStorage with debounced writes, status bar feedback, and restore on page reload.
Plugin API for registering custom toolbar buttons with SVG icons, tooltips, and initialization callbacks.
HTML source view toggle for switching between visual mode and raw markup editing.
Status bar displays live word count, character count, autosave state, and current block type.
PHP integration helper with asset loading, editor rendering, and server-side HTML sanitization methods.
Content export as HTML file download and browser print dialog support.

Use Cases:

CMS content editors that need a self-hosted rich text field with no reliance on third-party services.
Blog platforms that need a configurable toolbar scoped to specific formatting options per post type.
Admin dashboards that require structured HTML content authoring with table editing support.
PHP web applications that need a server-side render helper and sanitization layer for form-submitted HTML.

How to use it:

1. Load the Neiki Editor’s JavaScript and stylesheet:

2. Add a textarea to your webpage.

  <h2>Weekly Product Digest</h2>
  <p>Write a polished update for the team.</p>

3. Initialize Neiki Editor with default options.

const editor = new NeikiEditor('#editor');

4. Cofigure your editor with the following options:

placeholder (string): Placeholder text displayed when the editor contains no content. Default: 'Start typing...'.
minHeight (number): Minimum editor height in pixels. Default: 300.
maxHeight (number|null): Maximum editor height in pixels. The editor adds vertical scrolling when content exceeds this value. Default: null.
autofocus (boolean): Moves keyboard focus to the editor on initialization. Default: false.
spellcheck (boolean): Activates the browser’s built-in spellcheck on editor content. Default: true.
readonly (boolean): Puts the editor into read-only mode on load. Default: false.
theme (string): Sets the initial color theme. Accepts 'light' or 'dark'. Default: 'light'.
language (string): Sets the UI language. Accepts 'en', 'cs', 'zh', 'es', 'de', 'fr', 'pt', or 'ja'. Default: 'en'.
translations (object|null): Custom translation key map merged on top of the selected built-in language pack. Default: null.
toolbar (array): Controls which toolbar buttons appear and in what order. Insert the string '|' at any position to add a visual group separator.
onChange (function|null): Callback invoked on every content change. Receives (content, editor) where content is the current HTML string. Default: null.
onSave (function|null): Callback invoked when the user triggers Save via Ctrl+S or the More menu. Receives (content, editor). Default: null.
onFocus (function|null): Callback invoked when the editor gains keyboard focus. Receives (editor). Default: null.
onBlur (function|null): Callback invoked when the editor loses focus. Receives (editor). Default: null.
onReady (function|null): Callback invoked once after the editor finishes initializing. Receives (editor). Default: null.
showHelp (boolean): Shows or hides the Help entry in the More menu (⋯). Default: true.

const editor = new NeikiEditor('#editor', {

  // Placeholder text shown when the editor is empty
  placeholder: 'Write your article content here...',

  // Minimum editor height in pixels
  minHeight: 400,

  // Maximum height before scrolling kicks in (null = no limit)
  maxHeight: 800,

  // Focus the editor immediately after load
  autofocus: false,

  // Enable browser-native spellcheck
  spellcheck: true,

  // Set to true to block all editing input
  readonly: false,

  // 'light' or 'dark'
  theme: 'light',

  // UI language — see i18n section for all supported codes
  language: 'en',

  // Custom translation overrides merged with built-in keys
  translations: null,

  // Toolbar buttons in left-to-right order — '|' adds a visual separator
  toolbar: [
    'viewCode', 'undo', 'redo', 'findReplace', '|',
    'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'removeFormat', '|',
    'heading', 'fontFamily', 'fontSize', '|',
    'foreColor', 'backColor', '|',
    'alignLeft', 'alignCenter', 'alignRight', 'alignJustify', '|',
    'indent', 'outdent', '|',
    'bulletList', 'numberedList', 'blockquote', 'horizontalRule', '|',
    'insertDropdown', '|',
    'moreMenu'
  ],

  // Fires on every content change — receives the HTML string and editor instance
  onChange: function(content, editor) {
    console.log('Content updated at', new Date().toISOString());
  },

  // Fires on Ctrl+S or More menu → Save
  onSave: function(content, editor) {
    console.log('Save requested — content length:', content.length);
  },

  // Fires when the editor gains focus
  onFocus: function(editor) {
    console.log('Editor is focused');
  },

  // Fires when the editor loses focus
  onBlur: function(editor) {
    console.log('Editor lost focus');
  },

  // Fires once after the editor finishes initializing
  onReady: function(editor) {
    console.log('Neiki Editor is ready');
  },

  // Show or hide the Help item inside the More menu
  showHelp: true
  
});

5. The toolbar array accepts any of the following string keys. Add '|' between keys to create visual separator groups.

Text formatting: bold, italic, underline, strikethrough, subscript, superscript, removeFormat
Text style: heading, fontSize, fontFamily, foreColor, backColor
Alignment and lists: alignLeft, alignCenter, alignRight, alignJustify, bulletList, numberedList, indent, outdent
Insert Dropdown (insertDropdown): Renders a single Insert button that opens a dropdown with Link, Image, Table, Emoji, and Special Characters items. Use the individual keys link, image, table, emoji, and specialChars to place these as standalone buttons.
Standalone tools: undo, redo, findReplace, viewCode, blockquote, horizontalRule
More Menu (moreMenu): Renders a ⋯ button pinned to the right that opens a dropdown with Save, Preview, Download, Print, Autosave, Clear All, Toggle Theme, Fullscreen, and Help.

6. API methods:

// Get the current editor content as an HTML string
const html = editor.getContent();

// Replace editor content with new HTML
editor.setContent('Replaced content goes here.');

// Get the editor content as plain text — all HTML tags stripped
const plain = editor.getText();

// Returns true when the editor has no content
const isEmpty = editor.isEmpty();

// Alias for getContent()
const html2 = editor.getHTML();

// Alias for setContent()
editor.setHTML('Set via alias method.');

// Get a structured JSON representation of the current content
const json = editor.getJSON();

// Populate the editor from a previously captured JSON structure
editor.setJSON(json);

// Move keyboard focus to the editor
editor.focus();

// Remove keyboard focus from the editor
editor.blur();

// Re-enable editing after the editor was disabled
editor.enable();

// Disable all editing input — puts the editor into read-only mode
editor.disable();

// Remove the editor instance and restore the original textarea element
editor.destroy();

// Toggle fullscreen mode on and off
editor.toggleFullscreen();

// Toggle between light and dark themes
editor.toggleTheme();

// Set a specific theme directly
editor.setTheme('dark');

// Manually trigger the onSave callback
editor.triggerSave();

// Open the content preview modal
editor.previewContent();

// Trigger the browser download dialog with content as an HTML file
editor.downloadContent();

// Remove all content from the editor
editor.clearAll();

// Execute a built-in formatting command by name
editor.execCommand('bold');

// Insert an HTML string at the current cursor position
editor.insertHTML('Highlighted passage');

// Wrap the current selection in a specified element with optional attributes
editor.wrapSelection('mark', { class: 'callout' });

// Remove a wrapping element from the current selection
editor.unwrapSelection('mark');

// Return the browser's Selection object for the current selection
const selection = editor.getSelection();

7. The plugin system adds custom toolbar buttons with full access to the editor instance. Register plugins before or after initialization. They remain available across all instances on the page.

name (string, required): Unique plugin identifier. No spaces. Used internally to register and retrieve the plugin.
icon (string, optional): SVG markup for the toolbar button icon. Omit this property to register a background-only plugin with no button.
tooltip (string, optional): Text shown in the button’s tooltip on hover.
action (function, optional): Function called when the toolbar button is clicked. Receives the editor instance as its argument.
init (function, optional): Function called once during editor initialization. Receives the editor instance. Use this for one-time setup logic.

// Register a custom reading-time plugin with a toolbar button
NeikiEditor.registerPlugin({

    // Unique identifier for this plugin — no spaces
    name: 'reading-time-counter',

    // SVG icon rendered as the toolbar button graphic
    icon: '',

    // Tooltip text shown when hovering the toolbar button
    tooltip: 'Estimate Reading Time',

    // Runs when the user clicks the toolbar button
    action: function(editor) {
        const words = editor.getText().trim().split(/\s+/).filter(Boolean).length;
        const minutes = Math.ceil(words / 200);
        alert('Estimated reading time: ' + minutes + ' minute(s)');
    },

    // Runs once when the editor initializes — useful for DOM setup or event listeners
    init: function(editor) {
        console.log('Reading time plugin initialized');
    }
});

// Get an array of all registered plugin objects
const plugins = NeikiEditor.getPlugins();

8. Themes and Localization:

// Initialize with dark theme
const editor = new NeikiEditor('#editor', { theme: 'dark' });

// Toggle between light and dark at runtime
editor.toggleTheme();

// Set a specific theme programmatically
editor.setTheme('light');

// Initialize with French UI
const editorFr = new NeikiEditor('#article-body', { language: 'fr' });

// Register custom translation keys for German — only override what you need
// English serves as the fallback for any key you leave out
NeikiEditor.addTranslation('de', {
  'toolbar.bold': 'Fett (Strg+B)',
  'toolbar.italic': 'Kursiv (Strg+I)',
  'toolbar.undo': 'Rückgängig (Strg+Z)',
  'toolbar.redo': 'Wiederholen (Strg+Y)'
});

const editorDe = new NeikiEditor('#article-body', { language: 'de' });

// Alternatively, pass translations inline in the config object
const editorInline = new NeikiEditor('#editor', {
  language: 'de',
  translations: {
    de: {
      'toolbar.bold': 'Fett (Strg+B)',
      'toolbar.italic': 'Kursiv (Strg+I)'
    }
  }
});

Framework Integration:

React:

import { useEffect, useRef } from 'react';

function ArticleEditor({ initialValue, onChange }) {
    const textareaRef = useRef(null);
    const editorRef = useRef(null);

    useEffect(() => {
        // Initialize the editor once the component mounts
        editorRef.current = new NeikiEditor(textareaRef.current, {
            onChange: (content) => onChange?.(content)
        });

        // Destroy the editor instance when the component unmounts
        return () => editorRef.current?.destroy();
    }, []);

    return ;
}
</pre>
<p><strong>Vue.js:</strong></p>
<pre><template>
  <textarea ref="editorEl">

AJAX auto-save:

// Debounce saves so the server receives one request per 2-second idle window
const editor = new NeikiEditor('#article-body', {
    onChange: debounce(function(content) {
        fetch('/api/posts/draft', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ content })
        });
    }, 2000)
});

PHP:





    
    


    
        
        content, [
            'minHeight' => 450,
            'placeholder' => 'Write your post content here...'
        ]) ?>

// publish.php — always sanitize HTML before writing to the database
require_once 'php/neiki-editor.php';
$safe = NeikiEditor::sanitize($_POST['body']);
$db->query('UPDATE posts SET content = ? WHERE id = ?', [$safe, $postId]);

Alternatives:

10 Best Free JavaScript WYSIWYG Rich Text Editors

The post Self-Hosted WYSIWYG Editor in Vanilla JS – Neiki Editor appeared first on CSS Script.

Vanilla Calendar JS Library for Date Picking, Scheduling, and Timelines

CSS Script — Mon, 20 Apr 2026 03:52:49 +0000

CalendarJS is a feature-rich JavaScript calendar library that allows you to create calendars, date pickers, event schedules, and timelines in modern web apps.

Features:

Generate modal, inline, auto, and picker style calendars.
Pick single dates, date ranges, and date & time values.
Restrict selectable dates with valid date windows.
Change weekday order for local business calendars.
Show event markers inside the calendar grid.
Build day, week, and weekday schedule views.
Drag and resize schedule items in the grid.
Track schedule history with undo and redo actions.
Block editing in protected time ranges.
Switch timeline items across left, right, top, and bottom layouts.
Filter timeline output by month in monthly mode.
Convert ISO dates to Excel-style serial numbers.
Format dates into relative time labels.

Use cases:

Build a hotel booking form with date range and time selection.
Add a weekly staff planner to an internal operations dashboard.
Show a release history view inside a product changelog page.
Convert spreadsheet date values in import and export flows.

How to use it:

1. Install the package with NPM and import modules into your project:

npm install @calendarjs/ce

import { Calendar } from '@calendarjs/ce';
import { Schedule } from '@calendarjs/ce';
import { Timeline } from '@calendarjs/ce';

2. Or load it from a CDN:

3. Create an inline range calendar and a time picker

4. Build a weekly schedule:

5. Generate a timeline:

6. Use the helper utilities:

// Read the current UTC date string
const nowValue = calendarjs.Helpers.now();

// Convert an ISO date to an Excel style serial number
const serialValue = calendarjs.Helpers.dateToNum('2026-04-20 10:00:00');

// Convert the serial number back to a date string
const restoredDate = calendarjs.Helpers.numToDate(serialValue);

// Turn a timestamp into a relative label
const relativeLabel = calendarjs.Helpers.prettify('2026-04-19 10:00:00');

console.log(nowValue, serialValue, restoredDate, relativeLabel);

Configuration options:

Calendar options

type ('default' | 'auto' | 'picker' | 'inline'): Sets the calendar display mode.
format (string): Sets the output format for rendered values.
range (boolean): Turns range selection on or off.
value (number | string): Sets the initial calendar value.
numeric (boolean): Returns Excel style serial numbers in place of ISO strings.
footer (boolean): Shows or hides the footer controls.
time (boolean): Shows the hour and minute picker.
grid (boolean): Turns grid mode on or off.
placeholder (string): Sets placeholder text for bound inputs.
disabled (boolean): Locks the calendar UI.
startingDay (number): Sets the first weekday from 0 to 6.
validRange (number[] | string[]): Restricts selectable dates to a range.
data (Array<{date: string, [key: string]: any}>): Adds event data for calendar markers.
wheel (boolean): Turns mouse wheel view changes on or off.
input (HTMLInputElement | 'auto'): Binds the calendar to an input element.
initInput (boolean): Applies input setup and calendar classes.
onchange ((self: object, value: string) => void): Runs after the value changes.
onupdate ((self: object, value: string) => void): Runs after the view updates.
onclose ((self: object, origin: string) => void): Runs after the modal closes.
onopen ((self: object) => void): Runs after the modal opens.
onChange ((e: Event) => void): Exposes a React focused change hook.

Schedule options

type ('week' | 'day' | 'weekdays'): Sets the schedule view type.
weekly (boolean): Uses weekday columns in place of dated columns.
value (string): Sets the initial ISO date in YYYY-MM-DD format.
data (Schedule.Event[]): Loads the schedule with event records.
grid (number): Sets the grid step in minutes.
overlap (boolean): Permits overlapping events.
validRange (string[]): Restricts visible editing hours.
readOnlyRange (string[] | string[][]): Marks one or more time ranges as read only.
onbeforechange ((self: Instance, state: object) => boolean | void): Runs before a grid drag or resize change.
onchange ((self: Instance, state: object) => void): Runs after a grid state change.
onbeforecreate ((self: Instance, events: Event | Event[], e?: MouseEvent) => boolean | void): Runs before event creation.
oncreate ((self: Instance, events: Event | Event[], e?: MouseEvent) => void): Runs after event creation.
ondblclick ((self: Instance, event: Event) => void): Runs on event double click.
onedition ((self: Instance, event: Event) => void): Runs when editing starts.
ondelete ((self: Instance, event: Event) => void): Runs after event deletion.
onchangeevent ((self: Instance, newValue: Partial, oldValue: Partial) => void): Runs after event data changes.
onerror ((self: Instance, message: string) => void): Runs after validation errors.

Schedule event object

type (string | null): Sets the event type label.
title (string): Sets the event title.
start (string): Sets the start time in HH:MM.
end (string): Sets the end time in HH:MM.
guests (string): Stores guest data.
location (string): Stores a location label.
description (string): Stores descriptive text.
color (string): Sets the event color.
readonly (boolean): Locks the event from editing.
guid (string): Stores the unique event id.
date (string): Stores the ISO date when weekly is false.
weekday (number): Stores the weekday from 0 to 6 when weekly is true.

Timeline options

data (Timeline.Item[]): Loads the timeline with item records.
type ("monthly" | string): Sets the timeline mode.
align ("left" | "right" | "top" | "bottom" | string): Sets item alignment.
message (string): Sets the empty state message.
order ('asc' | 'desc' | undefined): Sets chronological order.
width (number): Sets container width.
height (number): Sets container height.
url (string): Sets a remote data URL.
remote (boolean): Turns remote loading on.
onupdate ((self: Object) => void): Runs after the visible timeline data updates.

Timeline item object

title (string): Sets the main item label.
subtitle (string): Sets the secondary label.
description (string): Sets the item body text.
date (string | Date): Sets the item date.
borderColor (string): Sets the item border color.
borderStyle (string): Sets the item border style.

API methods:

// Create a calendar instance
const calendar = calendarjs.Calendar(document.getElementById('calendar-root'), {
  type: 'inline'
});

// Open the calendar modal
calendar.open();

// Close the calendar modal
calendar.close({ origin: 'button' });

// Check modal state
calendar.isClosed();

// Switch the calendar view
calendar.setView('months');

// Move forward in the current view
calendar.next();

// Move backward in the current view
calendar.prev();

// Reset the selected value
calendar.reset();

// Read the current value
calendar.getValue();

// Write a new value
calendar.setValue('2026-04-24');

// Accept the current selection
calendar.update();


// Create a schedule instance
const schedule = calendarjs.Schedule(document.getElementById('schedule-root'), {
  type: 'week'
});

// Add one event
schedule.addEvents({
  guid: 'evt-201',
  title: 'Roadmap sync',
  date: '2026-04-24',
  start: '10:00',
  end: '11:00',
  color: '#b86e2f'
});

// Add multiple events
schedule.addEvents([
  {
    guid: 'evt-202',
    title: 'Editorial review',
    date: '2026-04-24',
    start: '12:00',
    end: '13:00',
    color: '#5e7f4a'
  },
  {
    guid: 'evt-203',
    title: 'Launch prep',
    date: '2026-04-25',
    start: '15:00',
    end: '16:00',
    color: '#9f5140'
  }
]);

// Update an event by guid
schedule.updateEvent('evt-201', {
  title: 'Roadmap sync v2',
  start: '10:30'
});

// Update an event by object reference
const firstRecord = schedule.getData()[0];
schedule.updateEvent(firstRecord, {
  end: '11:30'
});

// Delete by guid
schedule.deleteEvents('evt-202');

// Delete by object
schedule.deleteEvents(firstRecord);

// Delete multiple records
schedule.deleteEvents(['evt-201', 'evt-203']);

// Clear the current visual selection
schedule.resetSelection();

// Restrict editable hours
schedule.setRange(['09:00', '18:00']);

// Mark time ranges as read only
schedule.setReadOnly([['00:00', '09:00'], ['18:00', '23:59']]);

// Read all schedule data
schedule.getData();

// Replace all schedule data
schedule.setData([
  {
    guid: 'evt-301',
    title: 'Support block',
    date: '2026-04-26',
    start: '11:00',
    end: '12:00',
    color: '#b86e2f'
  }
]);

// Read the DOM node for an event
schedule.getEvent('evt-301');

// Render the schedule again
schedule.render();

// Undo the last change
schedule.undo();

// Redo the last undone change
schedule.redo();

// Move to the next period
schedule.next();

// Move to the previous period
schedule.prev();


// Create a timeline instance
const timeline = calendarjs.Timeline(document.getElementById('timeline-root'), {
  type: 'monthly',
  data: []
});

// Read the bound timeline data
timeline.data;

// Move to the next month in monthly mode
timeline.next();

// Move to the previous month in monthly mode
timeline.prev();

// Rebuild the visible item list
timeline.updateResult();

// Fetch remote data when remote mode is active
timeline.fetchRemote();


// Convert a value to two digits
calendarjs.Helpers.two(7);

// Validate a Date object
calendarjs.Helpers.isValidDate(new Date());

// Validate an ISO date string
calendarjs.Helpers.isValidDateFormat('2026-04-24');

// Convert a Date to a string
calendarjs.Helpers.toString(new Date(), false);

// Convert a string into an array
calendarjs.Helpers.toArray('2026-04-24 12:30:00');

// Convert an array into a string date
calendarjs.Helpers.arrayToStringDate([2026, 4, 24, 12, 30, 0]);

// Convert a Date or string to an Excel style serial
calendarjs.Helpers.dateToNum('2026-04-24 12:30:00');

// Convert an Excel style serial back to a string
calendarjs.Helpers.numToDate(46136.520833333336);

// Convert an Excel style serial to an array
calendarjs.Helpers.numToDate(46136.520833333336, true);

// Convert a timestamp into a relative label
calendarjs.Helpers.prettify('2026-04-23 12:30:00');

// Update every .prettydate node on the page
calendarjs.Helpers.prettifyAll();

// Read the current date string
calendarjs.Helpers.now();

// Read localized weekday names
calendarjs.Helpers.weekdays;

// Read localized short weekday names
calendarjs.Helpers.weekdaysShort;

// Read localized month names
calendarjs.Helpers.months;

// Read localized short month names
calendarjs.Helpers.monthsShort;


// Set custom labels
calendarjs.setDictionary({
  Reset: 'Clear',
  Done: 'Apply'
});

// Read package metadata
calendarjs.about();

Events:

// Run after a calendar value changes
calendarjs.Calendar(document.getElementById('calendar-a'), {
  onchange: function(self, value) {
    console.log('Calendar change:', value);
  }
});

// Run after the calendar view updates
calendarjs.Calendar(document.getElementById('calendar-b'), {
  onupdate: function(self, value) {
    console.log('Calendar update:', value);
  }
});

// Run after the calendar modal closes
calendarjs.Calendar(document.getElementById('calendar-c'), {
  onclose: function(self, origin) {
    console.log('Calendar closed from:', origin);
  }
});

// Run after the calendar modal opens
calendarjs.Calendar(document.getElementById('calendar-d'), {
  onopen: function(self) {
    console.log('Calendar opened');
  }
});

// React focused change callback
calendarjs.Calendar(document.getElementById('calendar-e'), {
  onChange: function(e) {
    console.log('React style change event:', e);
  }
});


// Run before a schedule drag or resize change
calendarjs.Schedule(document.getElementById('schedule-a'), {
  onbeforechange: function(self, state) {
    console.log('Before grid change:', state);
    return true;
  }
});

// Run after a schedule grid change
calendarjs.Schedule(document.getElementById('schedule-b'), {
  onchange: function(self, state) {
    console.log('Grid changed:', state);
  }
});

// Run before creating events
calendarjs.Schedule(document.getElementById('schedule-c'), {
  onbeforecreate: function(self, events, e) {
    console.log('Before create:', events, e);
    return true;
  }
});

// Run after creating events
calendarjs.Schedule(document.getElementById('schedule-d'), {
  oncreate: function(self, events, e) {
    console.log('Created:', events, e);
  }
});

// Run on event double click
calendarjs.Schedule(document.getElementById('schedule-e'), {
  ondblclick: function(self, event) {
    console.log('Double click:', event);
  }
});

// Run when event editing starts
calendarjs.Schedule(document.getElementById('schedule-f'), {
  onedition: function(self, event) {
    console.log('Editing:', event);
  }
});

// Run after deleting an event
calendarjs.Schedule(document.getElementById('schedule-g'), {
  ondelete: function(self, event) {
    console.log('Deleted:', event);
  }
});

// Run after event data changes
calendarjs.Schedule(document.getElementById('schedule-h'), {
  onchangeevent: function(self, newValue, oldValue) {
    console.log('Event changed:', newValue, oldValue);
  }
});

// Run after schedule validation errors
calendarjs.Schedule(document.getElementById('schedule-i'), {
  onerror: function(self, message) {
    console.log('Schedule error:', message);
  }
});


// Run after timeline data updates
calendarjs.Timeline(document.getElementById('timeline-a'), {
  onupdate: function(self) {
    console.log('Timeline updated:', self);
  }
});

Alternatives:

FullCalendar: Handles large calendar apps with month, week, resource, and drag editing views.
TOAST UI Calendar: Ships a full calendar UI with multiple calendar layers and template hooks.

The post Vanilla Calendar JS Library for Date Picking, Scheduling, and Timelines appeared first on CSS Script.