suneditor 3.0.0-rc.4 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "suneditor",
-	"version": "3.0.0-rc.4",
+	"version": "3.0.0",
 	"description": "Vanilla JavaScript based WYSIWYG web editor",
 	"author": "Yi JiHong",
 	"license": "MIT",
@@ -23,7 +23,7 @@
 			"types": "./types/langs/*.d.ts",
 			"default": "./src/langs/*.js"
 		},
-		"./css": {
+		"./css/editor": {
 			"types": "./types/assets/suneditor.css.d.ts",
 			"default": "./src/assets/suneditor.css"
 		},
@@ -35,11 +35,16 @@
 			"types": "./types/interfaces/index.d.ts",
 			"default": "./src/interfaces/index.js"
 		},
-		"./src/*": "./src/*",
+		"./src/*.css": "./src/*.css",
+		"./src/*.js": {
+			"types": "./types/*.d.ts",
+			"default": "./src/*"
+		},
 		"./package.json": "./package.json"
 	},
 	"sideEffects": [
-		"./src/assets/*.css"
+		"./src/assets/*.css",
+		"./src/themes/*.css"
 	],
 	"engines": {
 		"node": ">=14.0.0"
@@ -89,7 +94,6 @@
 		"babel-jest": "^30.2.0",
 		"babel-loader": "^10.0.0",
 		"barrelsby": "^2.8.1",
-		"baseline-browser-mapping": "^2.9.19",
 		"clean-webpack-plugin": "^4.0.0",
 		"codemirror": "^6.65.7",
 		"cross-env": "^7.0.3",
@@ -127,7 +131,7 @@
 		"chrome >= 119",
 		"edge >= 119",
 		"firefox >= 121",
-		"safari >= 17",
+		"safari >= 17.2",
 		"opera >= 105",
 		"samsung >= 23",
 		"Firefox ESR",

package/src/assets/design/color.css

@@ -3,6 +3,7 @@
 	/** --------------------------- content - [colors] ----------- */
 	/* caret and placeholder */
 	--se-caret-color: #333;
+	--se-drag-caret-color: #4592ff;
 	--se-placeholder-color: #bbb;
 
 	/* editable text tones */
@@ -39,9 +40,15 @@
 	--se-main-color: #000;
 	--se-main-color-lighter: #4c4c4d;
 	--se-main-background-color: #fff;
-	--se-code-view-color: #f5f5f5;
+	--se-code-view-color: #24292f;
 	--se-main-font-color: #333;
-	--se-code-view-background-color: #222;
+	--se-code-view-background-color: #fff;
+	--se-code-view-line-color: #57606a;
+	--se-code-view-line-background-color: #f6f8fa;
+	--se-markdown-view-color: #24292f;
+	--se-markdown-view-background-color: #fff;
+	--se-markdown-view-line-color: #57606a;
+	--se-markdown-view-line-background-color: #f6f8fa;
 	--se-main-divider-color: #e1e1e1;
 	--se-main-border-color: #d1d1d1;
 	--se-main-outline-color: #b1b1b1;
@@ -49,6 +56,11 @@
 	--se-statusbar-font-color: #666;
 	--se-overlay-background-color: #222;
 
+	/* finder */
+	--se-find-match-color: rgba(255, 213, 0, 0.4);
+	--se-find-current-color: rgba(255, 150, 50, 0.7);
+	--se-find-no-match-color: rgba(255, 80, 80, 0.12);
+
 	/* hover states */
 	--se-hover-color: #000;
 	--se-hover-dark-color: #cccccc;

package/src/assets/design/typography.css

@@ -7,8 +7,13 @@
 	/** --------------------------- layout - [typography] ----------- */
 	/* main */
 	--se-main-font-family: Helvetica Neue;
+	--se-content-font-family: Helvetica Neue;
 	--se-main-font-size: 13px;
 
+	/* codeview, markdown font */
+	--se-markdown-font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+	--se-codeview-font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
+
 	/* button */
 	--se-btn-font-size: 12px;
 

package/src/assets/icons/defaultIcons.js

@@ -18,8 +18,11 @@ export default {
 	outdent: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11,13H21V11H11M11,9H21V7H11M3,3V5H21V3M3,21H21V19H3M3,12L7,16V8M11,17H21V15H11V17Z" /></svg>',
 	expansion: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>',
 	reduction: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.5,3.09L15,7.59V4H13V11H20V9H16.41L20.91,4.5L19.5,3.09M4,13V15H7.59L3.09,19.5L4.5,20.91L9,16.41V20H11V13H4Z" /></svg>',
+	code_block:
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5.59 3.41L7 4.82L3.82 8L7 11.18L5.59 12.6L1 8L5.59 3.41M11.41 3.41L16 8L11.41 12.6L10 11.18L13.18 8L10 4.82L11.41 3.41M22 6V18C22 19.11 21.11 20 20 20H4C2.9 20 2 19.11 2 18V14H4V18H20V6H17.03V4H20C21.11 4 22 4.89 22 6Z" /></svg>',
 	code_view:
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.89,3L14.85,3.4L11.11,21L9.15,20.6L12.89,3M19.59,12L16,8.41V5.58L22.42,12L16,18.41V15.58L19.59,12M1.58,12L8,5.58V8.41L4.41,12L8,15.58V18.41L1.58,12Z" /></svg>',
+	markdown_view: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M2,16V8H4.73L7,11.19L9.27,8H12V16H10V10.6L7,14.05L4,10.6V16H2M16,8L20,12H17V16H15V12H12L16,8Z" /></svg>',
 	preview:
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9M12,4.5C17,4.5 21.27,7.61 23,12C21.27,16.39 17,19.5 12,19.5C7,19.5 2.73,16.39 1,12C2.73,7.61 7,4.5 12,4.5M3.18,12C4.83,15.36 8.24,17.5 12,17.5C15.76,17.5 19.17,15.36 20.82,12C19.17,8.64 15.76,6.5 12,6.5C8.24,6.5 4.83,8.64 3.18,12Z" /></svg>',
 	print: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18,3H6V7H18M19,12A1,1 0 0,1 18,11A1,1 0 0,1 19,10A1,1 0 0,1 20,11A1,1 0 0,1 19,12M16,19H8V14H16M19,8H5A3,3 0 0,0 2,11V17H6V21H18V17H22V11A3,3 0 0,0 19,8Z" /></svg>',
@@ -30,7 +33,7 @@ export default {
 	select_all:
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,9H15V15H9M7,17H17V7H7M15,5H17V3H15M15,21H17V19H15M19,17H21V15H19M19,9H21V7H19M19,21A2,2 0 0,0 21,19H19M19,13H21V11H19M11,21H13V19H11M9,3H7V5H9M3,17H5V15H3M5,21V19H3A2,2 0 0,0 5,21M19,3V5H21A2,2 0 0,0 19,3M13,3H11V5H13M3,9H5V7H3M7,21H9V19H7M3,13H5V11H3M3,5H5V3A2,2 0 0,0 3,5Z" /></svg>',
 	line_height: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M21 22H3V20H21V22M21 4H3V2H21V4M10 13.7H14L12 8.3L10 13.7M11.2 6H12.9L17.6 18H15.6L14.7 15.4H9.4L8.5 18H6.5L11.2 6Z" /></svg>',
-	paragraph_style: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10,11A4,4 0 0,1 6,7A4,4 0 0,1 10,3H18V5H16V21H14V5H12V21H10V11Z" /></svg>',
+	paragraph_style: '<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M360-160v-240q-83 0-141.5-58.5T160-600q0-83 58.5-141.5T360-800h360v80h-80v560h-80v-560H440v560h-80Z"/></svg>',
 	text_style: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3,3H16V6H11V18H8V6H3V3M12,7H14V9H12V7M15,7H17V9H15V7M18,7H20V9H18V7M12,10H14V12H12V10M12,13H14V15H12V13M12,16H14V18H12V16M12,19H14V21H12V19Z" /></svg>',
 	save: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z" /></svg>',
 	blockquote:
@@ -94,7 +97,7 @@ export default {
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15,5H17V3H15M15,13H17V11H15M15,21H17V19H15M11,5H13V3H11M19,5H21V3H19M11,9H13V7H11M19,9H21V7H19M19,21H21V19H19M19,13H21V11H19M19,17H21V15H19M11,13H13V11H11M3,5H5V3H3M3,9H5V7H3M3,13H5V11H3M3,17H5V15H3M3,21H5V19H3M11,21H13V19H11M11,17H13V15H11M7,21H9V19H7M7,13H9V11H7M7,5H9V3H7V5Z" /></svg>',
 	horizontal_line: '<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.74 2.24"><g><path d="M20.15,12.75V10.51H4.41v2.24H20.15Z" transform="translate(-4.41 -10.51)"/></g></svg>',
 	show_blocks:
-		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3C3.9 3 3 3.9 3 5S2.1 7 1 7V9C2.1 9 3 9.9 3 11S3.9 13 5 13H7V11H5V10C5 8.9 4.1 8 3 8C4.1 8 5 7.1 5 6V5H7V3M11 3C12.1 3 13 3.9 13 5S13.9 7 15 7V9C13.9 9 13 9.9 13 11S12.1 13 11 13H9V11H11V10C11 8.9 11.9 8 13 8C11.9 8 11 7.1 11 6V5H9V3H11M22 6V18C22 19.11 21.11 20 20 20H4C2.9 20 2 19.11 2 18V15H4V18H20V6H17.03V4H20C21.11 4 22 4.89 22 6Z" /></svg>',
+		'<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M40-40v-240h80v-400H40v-240h240v80h400v-80h240v240h-80v400h80v240H680v-80H280v80H40Zm240-160h400v-80h80v-400h-80v-80H280v80h-80v400h80v80Zm32-120 136-360h64l136 360h-62l-32-92H408l-32 92h-64Zm114-144h108l-52-150h-4l-52 150ZM120-760h80v-80h-80v80Zm640 0h80v-80h-80v80Zm0 640h80v-80h-80v80Zm-640 0h80v-80h-80v80Zm80-640Zm560 0Zm0 560Zm-560 0Z"/></svg>',
 	cancel: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" /></svg>',
 	selection_remove:
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 20V17H22V20C22 21.11 21.1 22 20 22H17V20H20M2 20V17H4V20H7V22H4C2.9 22 2 21.1 2 20M10 20H14V22H10V20M14.59 8L12 10.59L9.41 8L8 9.41L10.59 12L8 14.59L9.41 16L12 13.41L14.59 16L16 14.59L13.41 12L16 9.41L14.59 8M20 10H22V14H20V10M2 10H4V14H2V10M2 4C2 2.89 2.9 2 4 2H7V4H4V7H2V4M22 4V7H20V4H17V2H20C21.1 2 22 2.9 22 4M10 2H14V4H10V2Z" /></svg>',
@@ -178,8 +181,6 @@ export default {
 	cut: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19,3L13,9L15,11L22,4V3M12,12.5A0.5,0.5 0 0,1 11.5,12A0.5,0.5 0 0,1 12,11.5A0.5,0.5 0 0,1 12.5,12A0.5,0.5 0 0,1 12,12.5M6,20A2,2 0 0,1 4,18C4,16.89 4.9,16 6,16A2,2 0 0,1 8,18C8,19.11 7.1,20 6,20M6,8A2,2 0 0,1 4,6C4,4.89 4.9,4 6,4A2,2 0 0,1 8,6C8,7.11 7.1,8 6,8M9.64,7.64C9.87,7.14 10,6.59 10,6A4,4 0 0,0 6,2A4,4 0 0,0 2,6A4,4 0 0,0 6,10C6.59,10 7.14,9.87 7.64,9.64L10,12L7.64,14.36C7.14,14.13 6.59,14 6,14A4,4 0 0,0 2,18A4,4 0 0,0 6,22A4,4 0 0,0 10,18C10,17.41 9.87,16.86 9.64,16.36L12,14L19,21H22V20L9.64,7.64Z" /></svg>',
 	PDF: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3M9.5 11.5C9.5 12.3 8.8 13 8 13H7V15H5.5V9H8C8.8 9 9.5 9.7 9.5 10.5V11.5M14.5 13.5C14.5 14.3 13.8 15 13 15H10.5V9H13C13.8 9 14.5 9.7 14.5 10.5V13.5M18.5 10.5H17V11.5H18.5V13H17V15H15.5V9H18.5V10.5M12 10.5H13V13.5H12V10.5M7 10.5H8V11.5H7V10.5Z" /></svg>',
 	format_paint: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18,4V3A1,1 0 0,0 17,2H5A1,1 0 0,0 4,3V7A1,1 0 0,0 5,8H17A1,1 0 0,0 18,7V6H19V10H9V21A1,1 0 0,0 10,22H12A1,1 0 0,0 13,21V12H21V4H18Z" /></svg>',
-	find_replace:
-		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11,6C12.38,6 13.63,6.56 14.54,7.46L12,10H18V4L15.95,6.05C14.68,4.78 12.93,4 11,4C7.47,4 4.57,6.61 4.08,10H6.1C6.56,7.72 8.58,6 11,6M16.64,15.14C17.3,14.24 17.76,13.17 17.92,12H15.9C15.44,14.28 13.42,16 11,16C9.62,16 8.37,15.44 7.46,14.54L10,12H4V18L6.05,15.95C7.32,17.22 9.07,18 11,18C12.55,18 14,17.5 15.14,16.64L20,21.5L21.5,20L16.64,15.14Z" /></svg>',
 	drawing:
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.75 20.85C11.53 20.15 11.14 18.22 10.24 17C9.35 15.75 8.12 14.89 6.88 14.06C6 13.5 5.19 12.8 4.54 12C4.26 11.67 3.69 11.06 4.27 10.94C4.86 10.82 5.88 11.4 6.4 11.62C7.31 12 8.21 12.44 9.05 12.96L10.06 11.26C8.5 10.23 6.5 9.32 4.64 9.05C3.58 8.89 2.46 9.11 2.1 10.26C1.78 11.25 2.29 12.25 2.87 13.03C4.24 14.86 6.37 15.74 7.96 17.32C8.3 17.65 8.71 18.04 8.91 18.5C9.12 18.94 9.07 18.97 8.6 18.97C7.36 18.97 5.81 18 4.8 17.36L3.79 19.06C5.32 20 7.88 21.47 9.75 20.85M20.84 5.25C21.06 5.03 21.06 4.67 20.84 4.46L19.54 3.16C19.33 2.95 18.97 2.95 18.76 3.16L17.74 4.18L19.82 6.26M11 10.92V13H13.08L19.23 6.85L17.15 4.77L11 10.92Z" /></svg>',
 	eraser: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.14,3C14.63,3 14.12,3.2 13.73,3.59L2.59,14.73C1.81,15.5 1.81,16.77 2.59,17.56L5.03,20H12.69L21.41,11.27C22.2,10.5 22.2,9.23 21.41,8.44L16.56,3.59C16.17,3.2 15.65,3 15.14,3M17,18L15,20H22V18" /></svg>',
@@ -187,6 +188,21 @@ export default {
 	selection_search:
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19.27 18.9C19.7 18.21 19.95 17.38 19.95 16.5C19.95 14 17.95 12 15.46 12S10.96 14 10.96 16.5 12.96 21 15.46 21C16.33 21 17.15 20.75 17.84 20.32L20.96 23.39L22.35 22L19.27 18.9M15.46 19C14.07 19 12.96 17.88 12.96 16.5S14.07 14 15.46 14 17.95 15.12 17.95 16.5 16.84 19 15.46 19M22 14H21.45C21.12 13.19 20.62 12.47 20 11.86V10H22V14M20 4H17V2H20C21.11 2 22 2.9 22 4V7H20V4M14 4H10V2H14V4M4 2H7V4H4V7H2V4C2 2.89 2.9 2 4 2M12 22H10V20C10.5 20.82 11.2 21.5 12 22M4 20H7V22H4C2.9 22 2 21.11 2 20V17H4V20M4 14H2V10H4V14Z" /></svg>',
 	embed: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 19H15V21H19C20.1 21 21 20.1 21 19V15H19M19 3H15V5H19V9H21V5C21 3.9 20.1 3 19 3M5 5H9V3H5C3.9 3 3 3.9 3 5V9H5M5 15H3V19C3 20.1 3.9 21 5 21H9V19H5V15M7 11H9V13H7V11M11 11H13V13H11V11M15 11H17V13H15V11Z" /></svg>',
+	// finder
+	finder: '<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>',
+	regex: '<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M197-199q-56-57-86.5-130T80-482q0-80 30-153t87-130l57 57q-46 45-70 103.5T160-482q0 64 24.5 122.5T254-256l-57 57Zm140.5-58.5Q320-275 320-300t17.5-42.5Q355-360 380-360t42.5 17.5Q440-325 440-300t-17.5 42.5Q405-240 380-240t-42.5-17.5ZM519-440v-71l-61 36-40-70 61-35-61-35 40-70 61 36v-71h80v71l61-36 40 70-61 35 61 35-40 70-61-36v71h-80Zm244 241-57-57q46-45 70-103.5T800-482q0-64-24.5-122.5T706-708l57-57q56 57 86.5 130T880-482q0 80-30 153t-87 130Z"/></svg>',
+	match_case:
+		'<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m131-252 165-440h79l165 440h-76l-39-112H247l-40 112h-76Zm139-176h131l-64-182h-4l-63 182Zm395 186q-51 0-81-27.5T554-342q0-44 34.5-72.5T677-443q23 0 45 4t38 11v-12q0-29-20.5-47T685-505q-23 0-42 9.5T610-468l-47-35q24-29 54.5-43t68.5-14q69 0 103 32.5t34 97.5v178h-63v-37h-4q-14 23-38 35t-53 12Zm12-54q35 0 59.5-24t24.5-56q-14-8-33.5-12.5T689-393q-32 0-50 14t-18 37q0 20 16 33t40 13Z"/></svg>',
+	whole_word:
+		'<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M40-199v-200h80v120h720v-120h80v200H40Zm342-161v-34h-3q-13 20-35 31.5T294-351q-49 0-77-25.5T189-446q0-42 32.5-68.5T305-541q23 0 42.5 3.5T381-526v-14q0-27-18.5-43T312-599q-21 0-39.5 9T241-564l-43-32q19-27 48-41t67-14q62 0 95 29.5t33 85.5v176h-59Zm-66-134q-32 0-49 12.5T250-446q0 20 15 32.5t39 12.5q32 0 54.5-22.5T381-478q-14-8-32-12t-33-4Zm185 134v-401h62v113l-3 40h3q3-5 24-25.5t66-20.5q64 0 101 46t37 106q0 60-36.5 105.5T653-351q-41 0-62.5-18T563-397h-3v37h-59Zm143-238q-40 0-62 29.5T560-503q0 37 22 66t62 29q40 0 62.5-29t22.5-66q0-37-22.5-66T644-598Z"/></svg>',
+	swap_vert:
+		'<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z"/></svg>',
+	arrow_down_small: '<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z"/></svg>',
+	arrow_up_small: '<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z"/></svg>',
+	replaceText:
+		'<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" ><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g><path fill-rule="evenodd" clip-rule="evenodd" d="M3.221 3.739l2.261 2.269L7.7 3.784l-.7-.7-1.012 1.007-.008-1.6a.523.523 0 0 1 .5-.526H8V1H6.48A1.482 1.482 0 0 0 5 2.489V4.1L3.927 3.033l-.706.706zm6.67 1.794h.01c.183.311.451.467.806.467.393 0 .706-.168.94-.503.236-.335.353-.78.353-1.333 0-.511-.1-.913-.301-1.207-.201-.295-.488-.442-.86-.442-.405 0-.718.194-.938.581h-.01V1H9v4.919h.89v-.386zm-.015-1.061v-.34c0-.248.058-.448.175-.601a.54.54 0 0 1 .445-.23.49.49 0 0 1 .436.233c.104.154.155.368.155.643 0 .33-.056.587-.169.768a.524.524 0 0 1-.47.27.495.495 0 0 1-.411-.211.853.853 0 0 1-.16-.532zM9 12.769c-.256.154-.625.231-1.108.231-.563 0-1.02-.178-1.369-.533-.349-.355-.523-.813-.523-1.374 0-.648.186-1.158.56-1.53.374-.376.875-.563 1.5-.563.433 0 .746.06.94.179v.998a1.26 1.26 0 0 0-.792-.276c-.325 0-.583.1-.774.298-.19.196-.283.468-.283.816 0 .338.09.603.272.797.182.191.431.287.749.287.282 0 .558-.092.828-.276v.946zM4 7L3 8v6l1 1h7l1-1V8l-1-1H4zm0 1h7v6H4V8z"></path></g></svg>',
+	relaceTextAll:
+		'<svg class="se-ci" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g stroke-width="0"></g><g stroke-linecap="round" stroke-linejoin="round"></g><g><path fill-rule="evenodd" clip-rule="evenodd" d="M11.6 2.677c.147-.31.356-.465.626-.465.248 0 .44.118.573.353.134.236.201.557.201.966 0 .443-.078.798-.235 1.067-.156.268-.365.402-.627.402-.237 0-.416-.125-.537-.374h-.008v.31H11V1h.593v1.677h.008zm-.016 1.1a.78.78 0 0 0 .107.426c.071.113.163.169.274.169.136 0 .24-.072.314-.216.075-.145.113-.35.113-.615 0-.22-.035-.39-.104-.514-.067-.124-.164-.187-.29-.187-.12 0-.219.062-.297.185a.886.886 0 0 0-.117.48v.272zM4.12 7.695L2 5.568l.662-.662 1.006 1v-1.51A1.39 1.39 0 0 1 5.055 3H7.4v.905H5.055a.49.49 0 0 0-.468.493l.007 1.5.949-.944.656.656-2.08 2.085zM9.356 4.93H10V3.22C10 2.408 9.685 2 9.056 2c-.135 0-.285.024-.45.073a1.444 1.444 0 0 0-.388.167v.665c.237-.203.487-.304.75-.304.261 0 .392.156.392.469l-.6.103c-.506.086-.76.406-.76.961 0 .263.061.473.183.631A.61.61 0 0 0 8.69 5c.29 0 .509-.16.657-.48h.009v.41zm.004-1.355v.193a.75.75 0 0 1-.12.436.368.368 0 0 1-.313.17.276.276 0 0 1-.22-.095.38.38 0 0 1-.08-.248c0-.222.11-.351.332-.389l.4-.067zM7 12.93h-.644v-.41h-.009c-.148.32-.367.48-.657.48a.61.61 0 0 1-.507-.235c-.122-.158-.183-.368-.183-.63 0-.556.254-.876.76-.962l.6-.103c0-.313-.13-.47-.392-.47-.263 0-.513.102-.75.305v-.665c.095-.063.224-.119.388-.167.165-.049.315-.073.45-.073.63 0 .944.407.944 1.22v1.71zm-.64-1.162v-.193l-.4.068c-.222.037-.333.166-.333.388 0 .1.027.183.08.248a.276.276 0 0 0 .22.095.368.368 0 0 0 .312-.17c.08-.116.12-.26.12-.436zM9.262 13c.321 0 .568-.058.738-.173v-.71a.9.9 0 0 1-.552.207.619.619 0 0 1-.5-.215c-.12-.145-.181-.345-.181-.598 0-.26.063-.464.189-.612a.644.644 0 0 1 .516-.223c.194 0 .37.069.528.207v-.749c-.129-.09-.338-.134-.626-.134-.417 0-.751.14-1.001.422-.249.28-.373.662-.373 1.148 0 .42.116.764.349 1.03.232.267.537.4.913.4zM2 9l1-1h9l1 1v5l-1 1H3l-1-1V9zm1 0v5h9V9H3zm3-2l1-1h7l1 1v5l-1 1V7H6z"></path></g></svg>',
 	// menu arrow
 	menu_arrow_down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7,10L12,15L17,10H7Z" /></svg>',
 	menu_arrow_up: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7,15L12,10L17,15H7Z" /></svg>',
@@ -227,6 +243,8 @@ export default {
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16,12A2,2 0 0,1 18,10A2,2 0 0,1 20,12A2,2 0 0,1 18,14A2,2 0 0,1 16,12M10,12A2,2 0 0,1 12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12M4,12A2,2 0 0,1 6,10A2,2 0 0,1 8,12A2,2 0 0,1 6,14A2,2 0 0,1 4,12Z" /></svg>',
 	more_vertical:
 		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,16A2,2 0 0,1 14,18A2,2 0 0,1 12,20A2,2 0 0,1 10,18A2,2 0 0,1 12,16M12,10A2,2 0 0,1 14,12A2,2 0 0,1 12,14A2,2 0 0,1 10,12A2,2 0 0,1 12,10M12,4A2,2 0 0,1 14,6A2,2 0 0,1 12,8A2,2 0 0,1 10,6A2,2 0 0,1 12,4Z" /></svg>',
+	more_flag:
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M360-160q-19 0-36-8.5T296-192L80-480l216-288q11-15 28-23.5t36-8.5h440q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H360ZM180-480l180 240h440v-480H360L180-480Zm248.5 28.5Q440-463 440-480t-11.5-28.5Q417-520 400-520t-28.5 11.5Q360-497 360-480t11.5 28.5Q383-440 400-440t28.5-11.5Zm140 0Q580-463 580-480t-11.5-28.5Q557-520 540-520t-28.5 11.5Q500-497 500-480t11.5 28.5Q523-440 540-440t28.5-11.5Zm140 0Q720-463 720-480t-11.5-28.5Q697-520 680-520t-28.5 11.5Q640-497 640-480t11.5 28.5Q663-440 680-440t28.5-11.5ZM580-480Z"/></svg>',
 	// as format
 	as_inline: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8,7L13,17H3L8,7M3,3H21V5H3V3M21,15V17H14V15H21M3,19H21V21H3V19Z" /></svg>',
 	as_block: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,7L17,17H7L12,7M3,3H21V5H3V3M3,19H21V21H3V19Z" /></svg>',

package/src/assets/suneditor-contents.css

@@ -3,7 +3,7 @@
 /* suneditor content */
 .sun-editor-editable {
 	box-sizing: border-box;
-	font-family: Helvetica Neue;
+	font-family: var(--se-content-font-family);
 	font-size: var(--se-edit-font-size);
 	color: var(--se-edit-font-color);
 	background-color: var(--se-edit-background-color);

package/src/assets/suneditor.css

@@ -545,7 +545,7 @@
 .sun-editor .se-btn:disabled,
 .sun-editor button:disabled,
 .sun-editor input:disabled {
-	cursor: not-allowed;
+	cursor: default;
 	color: var(--se-input-btn-disabled-color);
 }
 
@@ -851,7 +851,8 @@
 /** --- toolbar ---------------------------------------------------------- */
 .sun-editor .se-toolbar {
 	display: block;
-	position: relative;
+	position: sticky;
+	top: 0;
 	height: auto;
 	width: 100%;
 	overflow: visible;
@@ -881,8 +882,6 @@
 .sun-editor .se-toolbar.se-toolbar-inline {
 	display: none;
 	position: absolute;
-	box-shadow: 0 3px 9px var(--se-shadow-layer-color);
-	-webkit-box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 }
 
 /* balloon toolbar */
@@ -895,7 +894,13 @@
 	-webkit-box-shadow: 0 3px 9px var(--se-shadow-layer-color);
 }
 
-/* sticky toolbar */
+/* JS fallback: initial state — override CSS sticky */
+.sun-editor .se-toolbar.se-toolbar-relative {
+	position: relative;
+	top: auto;
+}
+
+/* JS fallback: sticky active — overrides both default and relative */
 .sun-editor .se-toolbar.se-toolbar-sticky {
 	position: fixed;
 	top: 0px;
@@ -907,6 +912,36 @@
 	z-index: -1;
 }
 
+/* Bottom toolbar: sticky from bottom */
+.sun-editor .se-toolbar.se-toolbar-bottom {
+	top: auto;
+	bottom: 0;
+	outline-offset: -1px;
+}
+
+/* Bottom toolbar: more layer opens above buttons */
+.sun-editor .se-toolbar.se-toolbar-bottom .se-btn-tray {
+	display: flex;
+	flex-wrap: wrap;
+}
+
+.sun-editor .se-toolbar.se-toolbar-bottom .se-btn-tray > .se-toolbar-more-layer {
+	order: -1;
+	width: 100%;
+	border-top: none;
+}
+
+.sun-editor .se-toolbar.se-toolbar-bottom .se-toolbar-more-layer .se-more-layer {
+	border-top: none;
+	border-bottom: 1px solid var(--se-main-divider-color);
+}
+
+/* JS fallback sticky for bottom */
+.sun-editor .se-toolbar.se-toolbar-sticky.se-toolbar-bottom {
+	top: auto;
+	bottom: 0px;
+}
+
 /* toolbar arrow up */
 .sun-editor .se-toolbar .se-arrow.se-arrow-up {
 	border-bottom-color: var(--se-main-divider-color);
@@ -1182,6 +1217,12 @@
 	max-height: 300px;
 }
 
+/* dropdown layer - code block */
+.sun-editor .se-list-layer.se-list-code-block {
+	min-width: 140px;
+	max-height: 310px;
+}
+
 /* dropdown layer - font family */
 .sun-editor .se-list-layer.se-list-font-family {
 	min-width: 156px;
@@ -1538,14 +1579,12 @@
 	position: relative;
 	margin-top: 14px;
 	height: 28px;
-	border-radius: 14px;
 	outline: 2px solid #fff;
 }
 
 .sun-editor .se-hue-gradient-container .se-hue-gradient {
 	cursor: pointer;
 	height: 28px;
-	border-radius: 14px;
 	background: linear-gradient(to right, #000, #fff);
 	position: relative;
 }
@@ -1691,28 +1730,71 @@
 
 .sun-editor .se-wrapper .se-code-wrapper {
 	width: 100%;
+	overflow: hidden;
 }
 .sun-editor .se-wrapper .se-code-wrapper > div {
-	width: 100%;
+	flex: 1;
+	min-width: 0;
 }
 .sun-editor .se-wrapper .se-code-wrapper .se-code-view-line {
-	background-color: var(--se-code-view-color);
-	color: var(--se-code-view-background-color);
+	background-color: var(--se-code-view-line-background-color);
+	color: var(--se-code-view-line-color);
 	text-align: right;
 	width: 50px;
 	font-size: var(--se-main-font-size);
-	padding-right: 6px;
+	line-height: 1.5;
+	padding: 4px 6px;
 	overflow: hidden;
+	resize: none !important;
 }
 
 .sun-editor .se-wrapper .se-code-viewer {
+	flex: 1;
+	min-width: 0;
 	background-color: var(--se-code-view-background-color);
 	color: var(--se-code-view-color);
+	font-family: var(--se-codeview-font-family);
 	font-size: var(--se-main-font-size);
-	word-break: break-all;
+	line-height: 1.5;
 	padding: 4px;
 	margin: 0;
+	tab-size: 4;
 	resize: none !important;
+	overflow-x: auto;
+	white-space: pre;
+	word-wrap: normal;
+}
+
+.sun-editor .se-wrapper .se-markdown-wrapper {
+	width: 100%;
+	overflow: hidden;
+}
+.sun-editor .se-wrapper .se-markdown-wrapper .se-markdown-view-line {
+	background-color: var(--se-markdown-view-line-background-color);
+	color: var(--se-markdown-view-line-color);
+	text-align: right;
+	width: 50px;
+	font-size: var(--se-main-font-size);
+	line-height: 1.5;
+	padding: 4px 6px;
+	overflow: hidden;
+	resize: none !important;
+}
+.sun-editor .se-wrapper .se-markdown-viewer {
+	flex: 1;
+	min-width: 0;
+	background-color: var(--se-markdown-view-background-color);
+	color: var(--se-markdown-view-color);
+	font-size: var(--se-main-font-size);
+	font-family: var(--se-markdown-font-family);
+	line-height: 1.5;
+	padding: 4px;
+	margin: 0;
+	tab-size: 4;
+	resize: none !important;
+	overflow-x: auto;
+	white-space: pre;
+	word-wrap: normal;
 }
 
 .sun-editor .se-wrapper .se-wrapper-wysiwyg {
@@ -1754,7 +1836,7 @@
 	display: flex;
 	width: auto;
 	height: auto;
-	min-height: 16px;
+	min-height: 18px;
 	border-top: 1px solid var(--se-main-divider-color);
 	padding: 0 4px;
 	background-color: var(--se-main-background-color);
@@ -2881,6 +2963,7 @@
 	margin: 0;
 }
 
+.sun-editor .se-select-menu .se-select-item.se-select-on,
 .sun-editor .se-select-menu .se-select-item *.se-select-on {
 	color: var(--se-active-dark3-color);
 }
@@ -3090,7 +3173,7 @@
 
 .sun-editor .se-browser .se-browser-tags a {
 	display: inline-block;
-	background-color: var(--se-code-view-color);
+	background-color: var(--se-main-divider-color);
 	padding: 6px 12px;
 	margin: 8px 0 8px 8px;
 	color: var(--se-main-font-color);
@@ -3573,6 +3656,204 @@
 	z-index: 1;
 }
 
+/** --- pre code lang --- */
+/* ---pre - language label */
+.sun-editor-editable pre[data-se-lang] {
+	position: relative;
+}
+.sun-editor-editable pre[data-se-lang]::before {
+	content: attr(data-se-lang);
+	position: absolute;
+	top: 0;
+	right: 0;
+	padding: 2px 8px;
+	font-size: 11px;
+	color: var(--se-secondary-color);
+	opacity: 0.7;
+	pointer-events: none;
+}
+.sun-editor-editable[contenteditable='true'] pre.se-pre-code-focus {
+	outline: 2px solid var(--se-active-color);
+	outline-offset: -2px;
+}
+.sun-editor-editable pre[data-se-lang].se-pre-code-focus::before {
+	display: none;
+}
+.sun-editor-editable.se-rtl pre[data-se-lang]::before {
+	right: auto;
+	left: 0;
+}
+
+/* ---pre language selector */
+.sun-editor .se-code-lang {
+	position: absolute;
+	display: none;
+	padding: 0;
+}
+.sun-editor .se-code-lang-button {
+	display: inline-flex;
+	align-items: center;
+	gap: 4px;
+	cursor: pointer;
+	margin: 0;
+	padding: 4px;
+	font-size: 11px;
+	font-family: monospace;
+	line-height: 1.4;
+	border-radius: var(--se-border-radius);
+	background-color: var(--se-edit-background-pre, #f9f9f9);
+	border: 1px solid var(--se-border-color);
+	color: var(--se-edit-font-pre, #666);
+	opacity: 0.75;
+	transition: opacity 0.15s;
+	white-space: nowrap;
+	box-shadow: 0;
+}
+.sun-editor .se-code-lang-button:hover {
+	opacity: 1;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+}
+.sun-editor .se-code-lang-icon {
+	font-weight: 700;
+	font-size: 10px;
+	opacity: 0.5;
+}
+
+/* --- Finder ---------------------------------------------------------- */
+.sun-editor .se-find-replace {
+	position: sticky;
+	z-index: 6;
+	display: none;
+	flex-direction: column;
+	margin-left: auto;
+	width: fit-content;
+	max-width: 100%;
+	background-color: var(--se-main-background-color);
+	border: 1px solid var(--se-main-border-color);
+	border-top: none;
+	border-right: none;
+	border-radius: 0 0 0 var(--se-border-radius);
+	box-shadow: -2px 2px 6px rgba(0, 0, 0, 0.1);
+	padding: 6px 8px;
+	gap: 4px;
+}
+.sun-editor .se-find-replace.se-find-replace-open {
+	display: flex;
+}
+
+.sun-editor .se-find-replace-row {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-end;
+	align-items: center;
+	gap: 4px;
+}
+.sun-editor .se-find-replace-row-replace {
+	display: flex;
+	justify-content: flex-start;
+}
+
+/* Finder - input */
+.sun-editor .se-find-replace .se-find-input-wrapper {
+	position: relative;
+	flex: 1 1 180px;
+	max-width: 420px;
+}
+
+.sun-editor .se-find-replace .se-find-replace-input {
+	width: 100%;
+	height: 26px;
+	padding: 2px 100px 2px 6px;
+	border: 1px solid var(--se-main-border-color);
+	border-radius: var(--se-border-radius);
+	background-color: var(--se-main-background-color);
+	color: var(--se-main-color);
+	font-size: 13px;
+	outline: none;
+	box-sizing: border-box;
+}
+.sun-editor .se-find-replace .se-find-replace-input:focus {
+	border-color: var(--se-active-color);
+	box-shadow: 0 0 0 1px var(--se-active-color);
+}
+.sun-editor .se-find-replace .se-find-replace-input.se-find-no-match {
+	background-color: var(--se-find-no-match-color, rgba(255, 80, 80, 0.12));
+}
+
+/* Finder - toggle button group */
+.sun-editor .se-find-replace .se-find-replace-toggle {
+	position: absolute;
+	right: 1px;
+	top: 50%;
+	transform: translateY(-50%);
+	font-size: 11px;
+	color: var(--se-main-color-lighter);
+	white-space: nowrap;
+	background-color: transparent;
+}
+.sun-editor .se-find-replace .se-find-replace-toggle > * {
+	display: flex;
+	float: left;
+	align-items: center;
+	justify-content: center;
+	height: 24px;
+	margin: 0;
+}
+.sun-editor .se-find-replace .se-find-replace-toggle .se-find-replace-info {
+	padding: 0 2px;
+}
+.sun-editor .se-find-replace .se-find-replace-toggle .se-find-replace-info .se-find-replace-count {
+	color: var(--se-main-color-lighter);
+}
+.sun-editor .se-find-replace .se-find-replace-toggle > button.on {
+	border: none;
+}
+
+/* Finder - buttons */
+.sun-editor .se-find-replace .se-find-replace-buttons {
+	display: flex;
+	gap: 1px;
+	flex-shrink: 0;
+}
+
+.sun-editor .se-find-replace .se-find-replace-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 24px;
+	height: 24px;
+	border: 1px solid transparent;
+	transition:
+		opacity 0.15s,
+		background-color 0.15s;
+	font-size: 11px;
+}
+
+.sun-editor .se-find-replace .se-find-replace-row .se-find-replace-btn {
+	background-color: transparent;
+}
+
+.sun-editor .se-find-replace .se-find-replace-btn svg {
+	width: 16px;
+	height: 16px;
+	fill: currentColor;
+}
+
+/* Finder - CSS Custom Highlight API: injected at runtime via JS (PostCSS cannot parse ::highlight) */
+/* Finter - Mark element fallback highlights */
+.sun-editor mark.se-find-mark,
+.sun-editor-editable mark.se-find-mark {
+	background-color: var(--se-find-match-color, rgba(255, 213, 0, 0.4));
+	color: inherit;
+	padding: 0;
+	margin: 0;
+	border-radius: 1px;
+}
+.sun-editor mark.se-find-mark.se-find-current,
+.sun-editor-editable mark.se-find-mark.se-find-current {
+	background-color: var(--se-find-current-color, rgba(255, 150, 50, 0.7));
+}
+
 /** --- RTL start -------------------------------------------------------------------------------------------------------------------------------------------------- */
 /* icon */
 .sun-editor.se-rtl .se-icon-flip-rtl svg,
@@ -3588,6 +3869,19 @@
 	margin: auto 1px;
 }
 
+/* Finder */
+.sun-editor.se-rtl .se-find-replace {
+	margin-left: 0;
+	margin-right: auto;
+	border-right: 1px solid var(--se-main-border-color);
+	border-left: none;
+	border-radius: 0 0 var(--se-border-radius) 0;
+	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.1);
+}
+.sun-editor.se-rtl .se-find-replace-row {
+	justify-content: flex-start;
+}
+
 /* statusbar */
 .sun-editor.se-rtl .se-status-bar .se-navigation {
 	direction: rtl;
@@ -3959,12 +4253,12 @@
 	float: right;
 }
 
-/** document-type codeView --------------------------------------------- */
-.sun-editor .se-wrapper.se-type-document.se-code-view-status {
+/** document-type codeView, markdownView --------------------------------------------- */
+.sun-editor .se-wrapper.se-type-document.se-source-view-status {
 	padding: 0;
 }
-.sun-editor .se-wrapper.se-type-document.se-code-view-status .se-document-lines,
-.sun-editor .se-wrapper.se-type-document.se-code-view-status .se-document-pages {
+.sun-editor .se-wrapper.se-type-document.se-source-view-status .se-document-lines,
+.sun-editor .se-wrapper.se-type-document.se-source-view-status .se-document-pages {
 	display: none;
 }