@onetype/framework 2.0.53 → 2.0.54

package/addons/render/elements/front/items/self/global/code/code.css

@@ -13,85 +13,248 @@
 	display: flex;
 	flex-direction: column;
 	width: 100%;
-	border: 1px solid transparent;
+	background: #0d1117;
 	border-radius: var(--ot-radius-m);
 	overflow: hidden;
 }
 
-/* Label */
+/* Head */
 
-.e-4a15b201 > .holder > .label
+.e-4a15b201 > .holder > .head
 {
 	display: flex;
 	align-items: center;
-	justify-content: space-between;
+	gap: var(--ot-spacing-s);
 	padding: var(--ot-spacing-s) var(--ot-spacing-m);
-	font-size: var(--ot-size-s);
-	font-weight: 600;
-	font-family: monospace;
-	color: var(--ot-text-2);
-	border-bottom: 1px solid transparent;
+	background: rgba(255, 255, 255, 0.03);
+	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
 }
 
-/* Copy */
-
-.e-4a15b201 > .holder > .label > .copy
+.e-4a15b201 > .holder > .head > .dots
 {
 	display: flex;
+	gap: 6px;
+	flex-shrink: 0;
+}
+
+.e-4a15b201 > .holder > .head > .dots > span
+{
+	width: 11px;
+	height: 11px;
+	border-radius: 50%;
+	background: rgba(255, 255, 255, 0.14);
+}
+
+.e-4a15b201 > .holder > .head > .dots > span:nth-child(1) { background: #ff5f56; }
+.e-4a15b201 > .holder > .head > .dots > span:nth-child(2) { background: #ffbd2e; }
+.e-4a15b201 > .holder > .head > .dots > span:nth-child(3) { background: #27c93f; }
+
+.e-4a15b201 > .holder > .head > .filename,
+.e-4a15b201 > .holder > .head > .language
+{
+	flex: 1;
+	text-align: center;
+	font-family: ui-monospace, 'SF Mono', Menlo, monospace;
+	font-size: 12px;
+	font-weight: 500;
+	color: rgba(255, 255, 255, 0.55);
+}
+
+.e-4a15b201 > .holder > .head > .language
+{
+	text-transform: uppercase;
+	font-size: 10.5px;
+	letter-spacing: 0.06em;
+}
+
+.e-4a15b201 > .holder > .head > .copy
+{
+	display: inline-flex;
 	align-items: center;
-	justify-content: center;
-	padding: 0;
-	background: none;
-	border: none;
-	color: var(--ot-text-2);
+	gap: 5px;
+	padding: 5px 10px;
+	background: rgba(255, 255, 255, 0.06);
+	border: 1px solid rgba(255, 255, 255, 0.08);
+	border-radius: 100px;
+	color: rgba(255, 255, 255, 0.7);
+	font-family: var(--ot-font-primary);
+	font-size: 11px;
+	font-weight: 600;
 	cursor: pointer;
-	transition: color 0.15s ease;
+	transition: background 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
+	flex-shrink: 0;
+}
+
+.e-4a15b201 > .holder > .head > .copy:hover
+{
+	background: rgba(255, 255, 255, 0.1);
+	color: white;
 }
 
-.e-4a15b201 > .holder > .label > .copy:hover
+.e-4a15b201 > .holder > .head > .copy > i
 {
-	color: var(--ot-text-1);
+	font-size: 13px;
 }
 
-.e-4a15b201 > .holder > .label > .copy > i
+.e-4a15b201 > .holder > .head > .copy.copied
 {
-	font-size: var(--ot-size-m);
+	background: rgba(52, 211, 153, 0.15);
+	border-color: rgba(52, 211, 153, 0.4);
+	color: #34d399;
 }
 
 /* Content */
 
 .e-4a15b201 > .holder > .content
 {
-	padding: var(--ot-spacing-m);
 	margin: 0;
-	font-size: var(--ot-size-s);
-	font-family: monospace;
-	color: var(--ot-text-2);
-	line-height: 1.6;
+	padding: var(--ot-spacing-m);
 	overflow-x: auto;
-	white-space: break-spaces;
+	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+	font-size: 13px;
+	line-height: 1.65;
+	color: #e6e6e6;
 	tab-size: 4;
 }
 
-/* Background variants */
+.e-4a15b201 > .holder > .content > code
+{
+	font-family: inherit;
+	font-size: inherit;
+	background: none;
+	padding: 0;
+	border: none;
+	color: inherit;
+	display: block;
+	white-space: pre;
+}
+
+/* Scrollbar */
+
+.e-4a15b201 > .holder > .content::-webkit-scrollbar
+{
+	height: 8px;
+}
+
+.e-4a15b201 > .holder > .content::-webkit-scrollbar-track
+{
+	background: transparent;
+}
+
+.e-4a15b201 > .holder > .content::-webkit-scrollbar-thumb
+{
+	background: rgba(255, 255, 255, 0.1);
+	border-radius: 100px;
+}
+
+.e-4a15b201 > .holder > .content::-webkit-scrollbar-thumb:hover
+{
+	background: rgba(255, 255, 255, 0.18);
+}
+
+/* Line numbers */
+
+.e-4a15b201 .numbered
+{
+	display: flex;
+	flex-direction: column;
+}
+
+.e-4a15b201 .line
+{
+	display: flex;
+	padding: 0 var(--ot-spacing-m) 0 0;
+	margin: 0 calc(var(--ot-spacing-m) * -1);
+	transition: background 0.15s ease;
+}
+
+.e-4a15b201 .line > .number
+{
+	width: 40px;
+	padding-right: 14px;
+	text-align: right;
+	color: rgba(255, 255, 255, 0.25);
+	user-select: none;
+	flex-shrink: 0;
+	border-right: 1px solid rgba(255, 255, 255, 0.06);
+	margin-right: 14px;
+}
+
+.e-4a15b201 .line > .content
+{
+	flex: 1;
+	min-width: 0;
+}
+
+.e-4a15b201 .line.highlighted
+{
+	background: rgba(226, 112, 85, 0.08);
+	box-shadow: inset 2px 0 0 var(--ot-brand);
+}
+
+.e-4a15b201 .line.highlighted > .number
+{
+	color: rgba(226, 112, 85, 0.7);
+}
+
+/* Plain (no numbers) */
+
+.e-4a15b201 .plain
+{
+	display: block;
+	white-space: pre;
+}
+
+/* ===== SYNTAX TOKENS ===== */
 
-.e-4a15b201 > .holder.bg-1 { background: var(--ot-bg-1); border-color: var(--ot-bg-1-border); }
-.e-4a15b201 > .holder.bg-1 > .label { background: var(--ot-bg-2); border-bottom-color: var(--ot-bg-1-border); }
-.e-4a15b201 > .holder.bg-2 { background: var(--ot-bg-2); border-color: var(--ot-bg-2-border); }
-.e-4a15b201 > .holder.bg-2 > .label { background: var(--ot-bg-3); border-bottom-color: var(--ot-bg-2-border); }
-.e-4a15b201 > .holder.bg-3 { background: var(--ot-bg-3); border-color: var(--ot-bg-3-border); }
-.e-4a15b201 > .holder.bg-3 > .label { background: var(--ot-bg-4); border-bottom-color: var(--ot-bg-3-border); }
-.e-4a15b201 > .holder.bg-4 { background: var(--ot-bg-4); border-color: var(--ot-bg-4-border); }
-.e-4a15b201 > .holder.bg-4 > .label { border-bottom-color: var(--ot-bg-4-border); }
+.e-4a15b201 .t-keyword { color: #ff7b72; font-weight: 500; }
+.e-4a15b201 .t-string { color: #a5d6ff; }
+.e-4a15b201 .t-number { color: #ffa657; }
+.e-4a15b201 .t-comment { color: #8b949e; font-style: italic; }
+.e-4a15b201 .t-fn { color: #d2a8ff; }
+.e-4a15b201 .t-tag { color: #7ee787; }
+.e-4a15b201 .t-attr { color: #79c0ff; }
+.e-4a15b201 .t-selector { color: #7ee787; }
+.e-4a15b201 .t-prop { color: #79c0ff; }
 
-/* Size variants */
+/* ===== BACKGROUNDS (subtle frame) ===== */
 
-.e-4a15b201 > .holder.size-s > .label { padding: var(--ot-spacing-x) var(--ot-spacing-s); }
-.e-4a15b201 > .holder.size-s > .content { padding: var(--ot-spacing-s); font-size: var(--ot-size-s); }
-.e-4a15b201 > .holder.size-m > .content { padding: var(--ot-spacing-m); font-size: var(--ot-size-s); }
-.e-4a15b201 > .holder.size-l > .label { padding: var(--ot-spacing-s) var(--ot-spacing-l); }
-.e-4a15b201 > .holder.size-l > .content { padding: var(--ot-spacing-l); font-size: var(--ot-size-m); }
+.e-4a15b201 > .holder.bg-1 { outline: 1px solid var(--ot-bg-1-border); outline-offset: -1px; }
+.e-4a15b201 > .holder.bg-2 { outline: 1px solid var(--ot-bg-2-border); outline-offset: -1px; }
+.e-4a15b201 > .holder.bg-3 { outline: 1px solid var(--ot-bg-3-border); outline-offset: -1px; }
+.e-4a15b201 > .holder.bg-4 { outline: 1px solid var(--ot-bg-4-border); outline-offset: -1px; }
 
-/* Border variant */
+/* ===== BORDER ===== */
 
 .e-4a15b201 > .holder.border { border: 1px solid var(--ot-bg-2-border); }
+
+.e-4a15b201 > .holder.bg-1.border { border-color: var(--ot-bg-1-border); }
+.e-4a15b201 > .holder.bg-2.border { border-color: var(--ot-bg-2-border); }
+.e-4a15b201 > .holder.bg-3.border { border-color: var(--ot-bg-3-border); }
+.e-4a15b201 > .holder.bg-4.border { border-color: var(--ot-bg-4-border); }
+
+/* ===== SIZES ===== */
+
+.e-4a15b201 > .holder.size-s > .content
+{
+	padding: var(--ot-spacing-s) var(--ot-spacing-m);
+	font-size: 12px;
+	line-height: 1.55;
+}
+
+.e-4a15b201 > .holder.size-s > .head
+{
+	padding: var(--ot-spacing-x) var(--ot-spacing-s);
+}
+
+.e-4a15b201 > .holder.size-l > .content
+{
+	padding: var(--ot-spacing-l);
+	font-size: 14px;
+	line-height: 1.75;
+}
+
+.e-4a15b201 > .holder.size-l > .head
+{
+	padding: var(--ot-spacing-m) var(--ot-spacing-l);
+}

package/addons/render/elements/front/items/self/global/code/code.js

@@ -1,48 +1,356 @@
 onetype.AddonReady('elements', (elements) =>
 {
+	const LANG_JS = {
+		keywords: /\b(const|let|var|function|return|if|else|for|while|do|switch|case|break|continue|new|class|extends|super|this|typeof|instanceof|in|of|try|catch|finally|throw|async|await|import|from|export|default|null|undefined|true|false|void|delete|yield|static)\b/g,
+		comment: /(\/\/[^\n]*|\/\*[\s\S]*?\*\/)/g,
+		string: /(`(?:[^`\\]|\\.)*`|'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*")/g,
+		number: /\b(\d+(\.\d+)?)\b/g,
+		fn: /\b([a-zA-Z_$][\w$]*)\s*(?=\()/g
+	};
+
+	const LANG_CSS = {
+		comment: /(\/\*[\s\S]*?\*\/)/g,
+		string: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g,
+		selector: /([.#]?[a-zA-Z_-][\w-]*(?:\s*[>+~]\s*[.#]?[a-zA-Z_-][\w-]*)*)(?=\s*\{)/g,
+		prop: /([a-zA-Z-]+)(?=\s*:)/g,
+		number: /\b(\d+(\.\d+)?(px|em|rem|vh|vw|%|s|ms)?)\b/g
+	};
+
+	const LANG_HTML = {
+		comment: /(<!--[\s\S]*?-->)/g,
+		tag: /(<\/?)([a-zA-Z][\w-]*)/g,
+		attr: /\s([a-zA-Z-:]+)(?==)/g,
+		string: /(=)("[^&]*"|'[^']*')/g
+	};
+
+	const LANG_JSON = {
+		string: /("(?:[^"\\]|\\.)*")/g,
+		number: /(-?\d+(\.\d+)?([eE][+-]?\d+)?)/g,
+		keyword: /\b(true|false|null)\b/g
+	};
+
+	const LANG_PYTHON = {
+		keywords: /\b(def|class|return|if|elif|else|for|while|import|from|as|pass|break|continue|try|except|finally|raise|with|lambda|yield|global|nonlocal|in|is|not|and|or|None|True|False|self)\b/g,
+		comment: /(#[^\n]*)/g,
+		string: /("""[\s\S]*?"""|'''[\s\S]*?'''|"(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g,
+		number: /\b(\d+(\.\d+)?)\b/g,
+		fn: /\b([a-zA-Z_][\w]*)\s*(?=\()/g
+	};
+
+	const LANG_BASH = {
+		comment: /(#[^\n]*)/g,
+		string: /("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')/g,
+		variable: /(\$\w+|\$\{[^}]+\})/g,
+		flag: /(\s)(-{1,2}[\w-]+)/g,
+		command: /^(\s*)([a-zA-Z_][\w-]*)/gm
+	};
+
+	const escapeHtml = (text) =>
+	{
+		return text
+			.replace(/&/g, '&')
+			.replace(/</g, '&lt;')
+			.replace(/>/g, '&gt;')
+			.replace(/"/g, '&quot;');
+	};
+
+	const tokenize = (code, language) =>
+	{
+		const escaped = escapeHtml(code);
+
+		if(language === 'js' || language === 'javascript')
+		{
+			return tokenizeJs(escaped);
+		}
+
+		if(language === 'css')
+		{
+			return tokenizeCss(escaped);
+		}
+
+		if(language === 'html')
+		{
+			return tokenizeHtml(escaped);
+		}
+
+		if(language === 'json')
+		{
+			return tokenizeJson(escaped);
+		}
+
+		if(language === 'python' || language === 'py')
+		{
+			return tokenizePython(escaped);
+		}
+
+		if(language === 'bash' || language === 'sh' || language === 'shell')
+		{
+			return tokenizeBash(escaped);
+		}
+
+		return escaped;
+	};
+
+	const tokenizeJs = (code) =>
+	{
+		const placeholders = [];
+
+		const stash = (match) =>
+		{
+			const index = placeholders.length;
+			placeholders.push(match);
+			return '\u0000ph' + index + 'hp\u0000';
+		};
+
+		code = code.replace(LANG_JS.comment, (match) => stash('<span class="t-comment">' + match + '</span>'));
+		code = code.replace(LANG_JS.string, (match) => stash('<span class="t-string">' + match + '</span>'));
+		code = code.replace(LANG_JS.keywords, '<span class="t-keyword">$1</span>');
+		code = code.replace(LANG_JS.number, '<span class="t-number">$1</span>');
+		code = code.replace(LANG_JS.fn, '<span class="t-fn">$1</span>');
+
+		code = code.replace(/\u0000ph(\d+)hp\u0000/g, (m, i) => placeholders[parseInt(i)]);
+
+		return code;
+	};
+
+	const tokenizeCss = (code) =>
+	{
+		const placeholders = [];
+
+		const stash = (match) =>
+		{
+			const index = placeholders.length;
+			placeholders.push(match);
+			return '\u0000ph' + index + 'hp\u0000';
+		};
+
+		code = code.replace(LANG_CSS.comment, (match) => stash('<span class="t-comment">' + match + '</span>'));
+		code = code.replace(LANG_CSS.string, (match) => stash('<span class="t-string">' + match + '</span>'));
+		code = code.replace(LANG_CSS.selector, '<span class="t-selector">$1</span>');
+		code = code.replace(LANG_CSS.prop, '<span class="t-prop">$1</span>');
+		code = code.replace(LANG_CSS.number, '<span class="t-number">$1</span>');
+
+		code = code.replace(/\u0000ph(\d+)hp\u0000/g, (m, i) => placeholders[parseInt(i)]);
+
+		return code;
+	};
+
+	const tokenizeHtml = (code) =>
+	{
+		const placeholders = [];
+
+		const stash = (match) =>
+		{
+			const index = placeholders.length;
+			placeholders.push(match);
+			return '\u0000ph' + index + 'hp\u0000';
+		};
+
+		code = code.replace(LANG_HTML.comment, (match) => stash('<span class="t-comment">' + match + '</span>'));
+		code = code.replace(LANG_HTML.string, '$1<span class="t-string">$2</span>');
+		code = code.replace(LANG_HTML.attr, ' <span class="t-attr">$1</span>');
+		code = code.replace(LANG_HTML.tag, '$1<span class="t-tag">$2</span>');
+
+		code = code.replace(/\u0000ph(\d+)hp\u0000/g, (m, i) => placeholders[parseInt(i)]);
+
+		return code;
+	};
+
+	const tokenizeJson = (code) =>
+	{
+		const placeholders = [];
+
+		const stash = (match) =>
+		{
+			const index = placeholders.length;
+			placeholders.push(match);
+			return '\u0000ph' + index + 'hp\u0000';
+		};
+
+		code = code.replace(LANG_JSON.string, (match) => stash('<span class="t-string">' + match + '</span>'));
+		code = code.replace(LANG_JSON.keyword, '<span class="t-keyword">$1</span>');
+		code = code.replace(LANG_JSON.number, '<span class="t-number">$1</span>');
+
+		code = code.replace(/\u0000ph(\d+)hp\u0000/g, (m, i) => placeholders[parseInt(i)]);
+
+		return code;
+	};
+
+	const tokenizePython = (code) =>
+	{
+		const placeholders = [];
+
+		const stash = (match) =>
+		{
+			const index = placeholders.length;
+			placeholders.push(match);
+			return '\u0000ph' + index + 'hp\u0000';
+		};
+
+		code = code.replace(LANG_PYTHON.comment, (match) => stash('<span class="t-comment">' + match + '</span>'));
+		code = code.replace(LANG_PYTHON.string, (match) => stash('<span class="t-string">' + match + '</span>'));
+		code = code.replace(LANG_PYTHON.keywords, '<span class="t-keyword">$1</span>');
+		code = code.replace(LANG_PYTHON.number, '<span class="t-number">$1</span>');
+		code = code.replace(LANG_PYTHON.fn, '<span class="t-fn">$1</span>');
+
+		code = code.replace(/\u0000ph(\d+)hp\u0000/g, (m, i) => placeholders[parseInt(i)]);
+
+		return code;
+	};
+
+	const tokenizeBash = (code) =>
+	{
+		const placeholders = [];
+
+		const stash = (match) =>
+		{
+			const index = placeholders.length;
+			placeholders.push(match);
+			return '\u0000ph' + index + 'hp\u0000';
+		};
+
+		code = code.replace(LANG_BASH.comment, (match) => stash('<span class="t-comment">' + match + '</span>'));
+		code = code.replace(LANG_BASH.string, (match) => stash('<span class="t-string">' + match + '</span>'));
+		code = code.replace(LANG_BASH.variable, '<span class="t-number">$1</span>');
+		code = code.replace(LANG_BASH.flag, '$1<span class="t-attr">$2</span>');
+		code = code.replace(LANG_BASH.command, '$1<span class="t-keyword">$2</span>');
+
+		code = code.replace(/\u0000ph(\d+)hp\u0000/g, (m, i) => placeholders[parseInt(i)]);
+
+		return code;
+	};
+
+	const parseHighlight = (value) =>
+	{
+		if(!value)
+		{
+			return [];
+		}
+
+		const result = [];
+
+		value.split(',').forEach(part =>
+		{
+			const range = part.trim().split('-');
+
+			if(range.length === 2)
+			{
+				const start = parseInt(range[0]);
+				const end = parseInt(range[1]);
+
+				for(let i = start; i <= end; i++)
+				{
+					result.push(i);
+				}
+			}
+			else
+			{
+				result.push(parseInt(range[0]));
+			}
+		});
+
+		return result;
+	};
+
 	elements.ItemAdd({
 		id: 'global-code',
 		icon: 'code',
 		name: 'Code',
-		description: 'Code block with label header and preformatted content.',
+		description: 'Code block with syntax highlighting for html, css, js. Copy button, line numbers and line highlight.',
 		category: 'Global',
 		author: 'OneType',
 		config: {
-			label: {
-				type: 'string',
-				value: ''
-			},
 			source: {
+				type: 'string'
+			},
+			color: {
+				type: 'string'
+			},
+			language: {
 				type: 'string',
-				value: ''
+				value: 'js',
+				options: ['js', 'javascript', 'css', 'html', 'json', 'python', 'py', 'bash', 'sh', 'shell']
+			},
+			filename: {
+				type: 'string'
+			},
+			lines: {
+				type: 'boolean',
+				value: false
+			},
+			highlight: {
+				type: 'string'
+			},
+			copy: {
+				type: 'boolean',
+				value: true
 			},
 			variant: {
 				type: 'array',
-				value: ['bg-2'],
+				value: ['bg-2', 'border'],
 				options: ['bg-1', 'bg-2', 'bg-3', 'bg-4', 'border', 'size-s', 'size-m', 'size-l']
 			}
 		},
 		render: function()
 		{
 			this.copied = false;
-			this.escaped = this.source ? this.source.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;') : '';
 
-			this.copy = ({ event }) =>
+			const raw = (this.source || '').replace(/^\n+|\n+$/g, '');
+			const highlighted = tokenize(raw, this.language);
+			const highlightLines = parseHighlight(this.highlight);
+
+			if(this.lines)
 			{
-				const text = event.target.closest('.holder').querySelector('.content').textContent;
-				navigator.clipboard.writeText(text);
+				const linesArray = highlighted.split('\n');
+
+				this.linesHtml = linesArray.map((line, index) =>
+				{
+					const number = index + 1;
+					const isHighlighted = highlightLines.includes(number);
+					const classes = 'line' + (isHighlighted ? ' highlighted' : '');
+
+					return '<div class="' + classes + '"><span class="number">' + number + '</span><span class="content">' + (line || ' ') + '</span></div>';
+				}).join('');
+
+				this.output = '<div class="numbered">' + this.linesHtml + '</div>';
+			}
+			else
+			{
+				this.output = '<span class="plain">' + highlighted + '</span>';
+			}
+
+			this.copyCode = () =>
+			{
+				if(navigator.clipboard && raw)
+				{
+					navigator.clipboard.writeText(raw);
+				}
+
 				this.copied = true;
-				setTimeout(() => { this.copied = false; }, 2000);
+
+				setTimeout(() =>
+				{
+					this.copied = false;
+				}, 1800);
 			};
 
-			return `
-				<div :class="'holder ' + variant.join(' ')">
-					<div class="label">
-						<span ot-if="label">{{ label }}</span>
-						<button class="copy" ot-click="copy"><i>{{ copied ? 'check' : 'content_copy' }}</i></button>
+			this.hasHead = !!this.filename || !!this.language || this.copy;
+
+			this.frameStyle = this.color ? 'background: ' + this.color : '';
+
+			return /* html */ `
+				<div :class="'holder ' + variant.join(' ')" :style="frameStyle">
+					<div ot-if="hasHead" class="head">
+						<div class="dots"><span></span><span></span><span></span></div>
+						<div ot-if="filename" class="filename">{{ filename }}</div>
+						<div ot-if="!filename && language" class="language">{{ language }}</div>
+						<button ot-if="copy" :class="'copy' + (copied ? ' copied' : '')" type="button" ot-click="copyCode">
+							<i ot-if="!copied">content_copy</i>
+							<i ot-if="copied">check</i>
+							<span>{{ copied ? 'Copied' : 'Copy' }}</span>
+						</button>
 					</div>
-					<pre ot-if="escaped" class="content"><div ot-html="escaped"></div></pre>
-					<pre ot-if="!escaped" class="content"><slot name="content"></slot></pre>
+					<pre class="content"><code ot-html="output"></code></pre>
 				</div>
 			`;
 		}