samclarke · w8tcha · Apr 1, 2024 · Apr 1, 2024 · Apr 1, 2024 · Apr 1, 2024
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,6 @@ sceditor.sublime-workspace
 /docs
 /coverage
 .DS_Store
-/codetests
+/codetests
+package-lock.json
+/.vs
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -3,6 +3,7 @@
 const libCoverage = require('istanbul-lib-coverage');
 const libReport = require('istanbul-lib-report');
 const reports = require('istanbul-reports');
+const sass = require('sass');
 const nodeResolve = require('@rollup/plugin-node-resolve').default;
 const fs = require('fs');
 const path = require('path');
@@ -86,12 +87,6 @@ module.exports = (grunt) => {
 						src: ['plugins/**.js', 'formats/**.js', 'icons/**.js'],
 						dest: 'dist/development/'
 					},
-					{
-						expand: true,
-						cwd: 'src/',
-						src: 'jquery.sceditor.default.css',
-						dest: 'dist/development/'
-					},
 					{
 						expand: true,
 						cwd: 'src/themes/icons/',
@@ -120,11 +115,6 @@ module.exports = (grunt) => {
 						src: 'example.html',
 						dest: 'dist/'
 					},
-					{
-						expand: true,
-						src: 'emoticons/**',
-						dest: 'dist/'
-					}
 				]
 			},
 			build: {
@@ -166,45 +156,20 @@ module.exports = (grunt) => {
 			},
 			build: {
 				files: {
-					'./minified/jquery.sceditor.min.js': [
-						'./src/jquery.sceditor.js'
-					],
 					'./minified/sceditor.min.js': [
 						'./src/sceditor.js'
 					]
 				}
 			},
 			dist: {
 				files: {
-					'./dist/development/jquery.sceditor.js': [
-						'./src/jquery.sceditor.js'
-					],
 					'./dist/development/sceditor.js': [
 						'./src/sceditor.js'
 					]
 				}
 			}
 		},
 
-		// Create the XHTML and BBCode bundled JS files
-		concat: {
-			dist: {
-				options: {
-					separator: ';'
-				},
-				files: {
-					'dist/development/jquery.sceditor.bbcode.js': [
-						'dist/development/jquery.sceditor.js',
-						'src/formats/bbcode.js'
-					],
-					'dist/development/jquery.sceditor.xhtml.js': [
-						'dist/development/jquery.sceditor.js',
-						'src/formats/xhtml.js'
-					]
-				}
-			}
-		},
-
 		// Minify the JavaScript
 		uglify: {
 			build: {
@@ -220,24 +185,6 @@ module.exports = (grunt) => {
 						src: 'minified/sceditor.min.js',
 						dest: 'minified/sceditor.min.js'
 					},
-					{
-						src: 'minified/jquery.sceditor.min.js',
-						dest: 'minified/jquery.sceditor.min.js'
-					},
-					{
-						src: [
-							'minified/jquery.sceditor.min.js',
-							'src/formats/bbcode.js'
-						],
-						dest: 'minified/jquery.sceditor.bbcode.min.js'
-					},
-					{
-						src: [
-							'minified/jquery.sceditor.min.js',
-							'src/formats/xhtml.js'
-						],
-						dest: 'minified/jquery.sceditor.xhtml.min.js'
-					},
 					{
 						expand: true,
 						filter: 'isFile',
@@ -248,42 +195,18 @@ module.exports = (grunt) => {
 				]
 			}
 		},
-
-		// Convert the less CSS theme files into CSS
-		less: {
-			build: {
-				options: {
-					paths: ['src/themes/', 'src/themes/icons'],
-					cleancss: true
-				},
-				files: [
-					{
-						expand: true,
-						filter: 'isFile',
-						cwd: 'src/themes/',
-						src: ['*.less'],
-						dest: 'minified/themes/',
-						ext: '.min.css'
-					}
-				]
-			},
-			dist: {
-				options: {
-					paths: ['src/themes/', 'src/themes/icons'],
-					cleancss: true
-				},
-				files: [
-					{
-						expand: true,
-						filter: 'isFile',
-						cwd: 'src/themes/',
-						src: ['*.less'],
-						dest: 'dist/development/themes/',
-						ext: '.css'
-					}
-				]
-			}
-		},
+
+		sass: {
+	options: {
+		implementation: sass,
+		sourceMap: false
+	},
+	build: {
+		files: {
+			"minified/themes/sceditor.min.css": 'src/themes/sceditor.scss'
+		}
+	}
+},
 
 		// Manage CSS vendor prefixes
 		postcss: {
@@ -338,11 +261,11 @@ module.exports = (grunt) => {
 	grunt.loadNpmTasks('grunt-contrib-compress');
 	grunt.loadNpmTasks('grunt-contrib-concat');
 	grunt.loadNpmTasks('grunt-contrib-copy');
-	grunt.loadNpmTasks('grunt-contrib-less');
 	grunt.loadNpmTasks('grunt-contrib-qunit');
 	grunt.loadNpmTasks('grunt-contrib-uglify');
 	grunt.loadNpmTasks('grunt-rollup');
 	grunt.loadNpmTasks('grunt-eslint');
+	grunt.loadNpmTasks('grunt-sass');
 
 	grunt.registerTask('default', ['test']);
 
@@ -352,10 +275,10 @@ module.exports = (grunt) => {
 	// Minifies the source
 	grunt.registerTask('build', [
 		'clean:build',
+		'sass', 
 		'copy:build',
 		'rollup:build',
 		'uglify:build',
-		'less:build',
 		'postcss:build'
 	]);
 
@@ -368,7 +291,6 @@ module.exports = (grunt) => {
 		'rollup:dist',
 		'concat:dist',
 		'copy:dist',
-		'less:dist'
 	]);
 
 	// Creates the simplified distributable ZIP

diff --git a/README.md b/README.md
@@ -18,8 +18,6 @@ Include the SCEditor JavaScript:
 ```html
 <link rel="stylesheet" href="minified/themes/default.min.css" />
 <script src="minified/sceditor.min.js"></script>
-<script src="minified/formats/bbcode.js"></script>
-<script src="minified/formats/xhtml.js"></script>
 ```
 
 Then to convert a textarea into SCEditor, simply do:

diff --git a/emoticons/alien.png b/emoticons/alien.png
diff --git a/emoticons/angel.png b/emoticons/angel.png
diff --git a/emoticons/angry.png b/emoticons/angry.png
diff --git a/emoticons/blink.png b/emoticons/blink.png
diff --git a/emoticons/blush.png b/emoticons/blush.png
diff --git a/emoticons/cheerful.png b/emoticons/cheerful.png
diff --git a/emoticons/cool.png b/emoticons/cool.png
diff --git a/emoticons/credits.txt b/emoticons/credits.txt
diff --git a/emoticons/cwy.png b/emoticons/cwy.png
diff --git a/emoticons/devil.png b/emoticons/devil.png
diff --git a/emoticons/dizzy.png b/emoticons/dizzy.png
diff --git a/emoticons/ermm.png b/emoticons/ermm.png
diff --git a/emoticons/face.png b/emoticons/face.png
diff --git a/emoticons/getlost.png b/emoticons/getlost.png
diff --git a/emoticons/grin.png b/emoticons/grin.png
diff --git a/emoticons/happy.png b/emoticons/happy.png
diff --git a/emoticons/heart.png b/emoticons/heart.png
diff --git a/emoticons/kissing.png b/emoticons/kissing.png
diff --git a/emoticons/laughing.png b/emoticons/laughing.png
diff --git a/emoticons/ninja.png b/emoticons/ninja.png
diff --git a/emoticons/pinch.png b/emoticons/pinch.png
diff --git a/emoticons/pouty.png b/emoticons/pouty.png
diff --git a/emoticons/sad.png b/emoticons/sad.png
diff --git a/emoticons/shocked.png b/emoticons/shocked.png
diff --git a/emoticons/sick.png b/emoticons/sick.png
diff --git a/emoticons/sideways.png b/emoticons/sideways.png
diff --git a/emoticons/silly.png b/emoticons/silly.png
diff --git a/emoticons/sleeping.png b/emoticons/sleeping.png
diff --git a/emoticons/smile.png b/emoticons/smile.png
diff --git a/emoticons/tongue.png b/emoticons/tongue.png
diff --git a/emoticons/unsure.png b/emoticons/unsure.png
diff --git a/emoticons/w00t.png b/emoticons/w00t.png
diff --git a/emoticons/wassat.png b/emoticons/wassat.png
diff --git a/emoticons/whistling.png b/emoticons/whistling.png
diff --git a/emoticons/wink.png b/emoticons/wink.png
diff --git a/emoticons/wub.png b/emoticons/wub.png
diff --git a/example/emoticons/alien.png b/example/emoticons/alien.png
diff --git a/example/emoticons/angel.png b/example/emoticons/angel.png
diff --git a/example/emoticons/angry.png b/example/emoticons/angry.png
diff --git a/example/emoticons/blink.png b/example/emoticons/blink.png
diff --git a/example/emoticons/blush.png b/example/emoticons/blush.png
diff --git a/example/emoticons/cheerful.png b/example/emoticons/cheerful.png
diff --git a/example/emoticons/cool.png b/example/emoticons/cool.png
diff --git a/example/emoticons/credits.txt b/example/emoticons/credits.txt
diff --git a/example/emoticons/cwy.png b/example/emoticons/cwy.png
diff --git a/example/emoticons/devil.png b/example/emoticons/devil.png
diff --git a/example/emoticons/dizzy.png b/example/emoticons/dizzy.png
diff --git a/example/emoticons/ermm.png b/example/emoticons/ermm.png
diff --git a/example/emoticons/face.png b/example/emoticons/face.png
diff --git a/example/emoticons/getlost.png b/example/emoticons/getlost.png
diff --git a/example/emoticons/grin.png b/example/emoticons/grin.png
diff --git a/example/emoticons/happy.png b/example/emoticons/happy.png
diff --git a/example/emoticons/heart.png b/example/emoticons/heart.png
diff --git a/example/emoticons/kissing.png b/example/emoticons/kissing.png
diff --git a/example/emoticons/laughing.png b/example/emoticons/laughing.png
diff --git a/example/emoticons/ninja.png b/example/emoticons/ninja.png
diff --git a/example/emoticons/pinch.png b/example/emoticons/pinch.png
diff --git a/example/emoticons/pouty.png b/example/emoticons/pouty.png
diff --git a/example/emoticons/sad.png b/example/emoticons/sad.png
diff --git a/example/emoticons/shocked.png b/example/emoticons/shocked.png
diff --git a/example/emoticons/sick.png b/example/emoticons/sick.png
diff --git a/example/emoticons/sideways.png b/example/emoticons/sideways.png
diff --git a/example/emoticons/silly.png b/example/emoticons/silly.png
diff --git a/example/emoticons/sleeping.png b/example/emoticons/sleeping.png
diff --git a/example/emoticons/smile.png b/example/emoticons/smile.png
diff --git a/example/emoticons/tongue.png b/example/emoticons/tongue.png
diff --git a/example/emoticons/unsure.png b/example/emoticons/unsure.png
diff --git a/example/emoticons/w00t.png b/example/emoticons/w00t.png
diff --git a/example/emoticons/wassat.png b/example/emoticons/wassat.png
diff --git a/example/emoticons/whistling.png b/example/emoticons/whistling.png
diff --git a/example/emoticons/wink.png b/example/emoticons/wink.png
diff --git a/example/emoticons/wub.png b/example/emoticons/wub.png
diff --git a/example/example.html b/example/example.html
@@ -1,91 +1,90 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 	<head>
-		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+		<meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
 
 		<title>SCEditor Demo</title>
 
-		<link rel="stylesheet" href="../minified/themes/default.min.css" id="theme-style" />
+		<link rel="stylesheet" href="../minified/themes/sceditor.min.css" id="theme-style" />
+		<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
 
 		<script src="../minified/sceditor.min.js"></script>
-		<script src="../minified/icons/monocons.js"></script>
+		<script src="../minified/icons/fontawesome.js"></script>
 		<script src="../minified/formats/bbcode.js"></script>
-
-		<style>
-			html {
-				font-family: Arial, Helvetica, sans-serif;
-				font-size: 13px;
-			}
-			form div {
-				padding: .5em;
-			}
-			code:before {
-				position: absolute;
-				content: 'Code:';
-				top: -1.35em;
-				left: 0;
-			}
-			code {
-				margin-top: 1.5em;
-				position: relative;
-				background: #eee;
-				border: 1px solid #aaa;
-				white-space: pre;
-				padding: .25em;
-				min-height: 1.25em;
-			}
-			code:before, code {
-				display: block;
-				text-align: left;
-			}
-		</style>
+		<script src="../minified/plugins/dragdrop.js"></script>
+		<script src="../minified/plugins/undo.js"></script>
+
+		<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" rel="stylesheet">
 	</head>
 	<body>
+
 		<form action="" method="post">
-			<div>
-				<textarea id="example" style="height:300px;width:600px;">[center][size=3][b]BBCode SCEditor[/b][/size][/center]
+		 <main class="container">
+  <div class="bg-body-tertiary p-5 rounded">
+    <h1>SCEditor example</h1>
+    <div>
+				<textarea id="example" class="form-control" style="height:300px;width:600px;" title="editor">[center][size=3][b]BBCode SCEditor[/b][/size][/center]
 
 Give it a try! :)
 
-[color=#ff00]Red text! [/color][color=#3399ff]Blue?[/color]
+[quote]CONTENT
 
-[ul][li]A simple list[/li][li]list item 2[/li][/ul]
+https://www.sceditor.com/
 
-Just type [b]:[/b]) and it should be converted into :) as you type.</textarea>
+PS: I've not used it and don't have any connection to it.[/quote]
+
+@[userlink]tha_watcha[/userlink]
+
+[code=markup]<pre><code class="language-css">p { color: red }</code></pre>[/code]
+
+[color=#ff00]Red text! [/color][color=#3399ff]Blue?[/color]
+
+[list][*]A simple list[*]list item 2[/list]
+Just type [b]:[/b]) and it should be converted into :) as you typed.</textarea>
 
-			</div>
 
-			<div>
-				<label for="theme">Theme:</label>
-				<select id="theme">
-					<option value="default">Default</option>
-					<option value="defaultdark">Default dark</option>
-					<option value="modern">Modern</option>
-					<option value="office-toolbar">Office Toolbar</option>
-					<option value="office">Office</option>
-					<option value="square">Square</option>
-				</select>
 			</div>
+  </div>
+</main>
+
 		</form>
+
+		<div class="container">
+  <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
+    <p class="col-md-4 mb-0 text-body-secondary">SCEditor is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT</a></p>
+  </footer>
+</div>
 
-
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
+		 <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"></script>
 		<script>
 			var textarea = document.getElementById('example');
-			sceditor.create(textarea, {
-				format: 'bbcode',
-				icons: 'monocons',
-				style: '../minified/themes/content/default.min.css'
-			});
-
+
 
-			var themeInput = document.getElementById('theme');
-			themeInput.onchange = function() {
-				var theme = '../minified/themes/' + themeInput.value + '.min.css';
+
+			sceditor.create(textarea, {
+			extensionsUrl: 'http://localhost/bbcode.json',
+	        autoExpand: true,
+			maxLength: 32767,
+			plugins: 'emojis',
 
-				document.getElementById('theme-style').href = theme;
-			};
+			//emojis: ['😊', '❤️', '😄', '😄', '😄', '😄', '😄', '😄', '😄', '😄', '😄', '😄'],
+			styles: ['https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css','https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css', 'https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css'],
+			toolbar: 'bold,italic,underline,strike|' +
+        'font,size,color|mark|' +
+        'email,link,unlink,quote,code,|image,albums|attachments|' +
+		'emojis|' +
+        'bulletlist,orderedlist|left,center,right|indent,outdent|' +
+        'cut,copy,pastetext,removeformat|' +
+		'undo,redo|' +
+        'youtube,vimeo,instagram,facebook,media,extensions|source|reply|table'
+			});
+
+
 		</script>
-
-		<p>SCEditor is licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT</a></p>
+
+
+
 	</body>
 </html>