= [];
+
+ for (const format of inlineAttributes) {
+ const value = attributes[format];
+ if (value) {
+ const customTag = this.options.customTag?.(format, this.op);
+ if (customTag) {
+ tags.push(customTag);
+ } else {
+ switch (format) {
+ case 'link':
+ case 'mentions':
+ tags.push(this.options.mentionTag || 'a');
+ break;
+ case 'script':
+ tags.push(value === ScriptType.Sub ? 'sub' : 'sup');
+ break;
+ case 'bold':
+ tags.push('strong');
+ break;
+ case 'italic':
+ tags.push('em');
+ break;
+ case 'strike':
+ tags.push('s');
+ break;
+ case 'underline':
+ tags.push('u');
+ break;
+ case 'code':
+ tags.push('code');
+ }
+ }
+ }
+ }
+
+ // Note that this array may be empty, which is the case when there's no formatting or attributes needed for inline text.
+ // The caller of this function may still render a wrapper tag if there are attributes.
+ return tags;
+ }
+}
diff --git a/src/sanitize-mention.ts b/src/sanitize-mention.ts
new file mode 100644
index 0000000..33114f7
--- /dev/null
+++ b/src/sanitize-mention.ts
@@ -0,0 +1,61 @@
+import {
+ OpAttributeSanitizer,
+ OpAttributeSanitizerOptions,
+} from './OpAttributeSanitizer.js';
+
+// See https://github.com/quill-mention/quill-mention
+export type Mention = {
+ class?: string;
+ target?: string;
+ link?: string;
+ [index: string]: unknown;
+};
+
+type UnknownDirtyMention = {
+ [key in keyof Mention]?: unknown;
+};
+
+const isDirtyMention = (value: unknown): value is UnknownDirtyMention =>
+ !!value && typeof value === 'object';
+
+const validClassRegex = /^[\w -]{1,500}$/i;
+
+const isValidClass = (value: string) => validClassRegex.test(value);
+
+export const sanitizeMention = (
+ dirtyObj: unknown,
+ sanitizeOptions: OpAttributeSanitizerOptions,
+): Mention => {
+ const cleanObj: Mention = {};
+
+ if (!isDirtyMention(dirtyObj)) {
+ return cleanObj;
+ }
+
+ for (const [key, value] of Object.entries(dirtyObj)) {
+ switch (key) {
+ case 'class':
+ if (typeof value === 'string' && isValidClass(value)) {
+ cleanObj.class = value;
+ }
+ break;
+ case 'target':
+ if (
+ typeof value === 'string' &&
+ OpAttributeSanitizer.isValidTarget(value)
+ ) {
+ cleanObj.target = value;
+ }
+ break;
+ case 'link':
+ if (typeof value === 'string') {
+ cleanObj.link = sanitizeOptions.urlSanitizer(value);
+ }
+ break;
+ default:
+ cleanObj[key] = value;
+ }
+ }
+
+ return cleanObj;
+};
diff --git a/src/value-types.ts b/src/value-types.ts
index 3ad8f01..c2dbfaf 100644
--- a/src/value-types.ts
+++ b/src/value-types.ts
@@ -1,50 +1,37 @@
-type NewLine = '\n';
-const NewLine = '\n' as NewLine;
-
-enum ListType {
+export enum ListType {
Ordered = 'ordered',
Bullet = 'bullet',
Checked = 'checked',
Unchecked = 'unchecked',
}
-enum ScriptType {
+export enum ScriptType {
Sub = 'sub',
Super = 'super',
}
-enum DirectionType {
+export enum DirectionType {
Rtl = 'rtl',
}
-enum AlignType {
+export enum AlignType {
Left = 'left',
Center = 'center',
Right = 'right',
Justify = 'justify',
}
-enum DataType {
+export enum DataType {
Image = 'image',
Video = 'video',
Formula = 'formula',
Text = 'text',
}
-enum GroupType {
+export enum GroupType {
Block = 'block',
InlineGroup = 'inline-group',
List = 'list',
Video = 'video',
Table = 'table',
}
-
-export {
- NewLine,
- ListType,
- ScriptType,
- DirectionType,
- AlignType,
- DataType,
- GroupType,
-};
diff --git a/test/DeltaInsertOp.test.ts b/test/DeltaInsertOp.test.ts
index 628aaa2..63132c2 100644
--- a/test/DeltaInsertOp.test.ts
+++ b/test/DeltaInsertOp.test.ts
@@ -1,179 +1,174 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { InsertDataQuill } from './../src/InsertData';
-import { DeltaInsertOp } from './../src/DeltaInsertOp';
-import { DataType, AlignType, ListType } from './../src/value-types';
-
-describe('DeltaInsertOp', function () {
- describe('constructor()', function () {
+import { describe, it } from 'vitest';
+import { strict as assert } from 'node:assert';
+import { InsertDataQuill } from '../src/InsertData.js';
+import { DeltaInsertOp } from '../src/DeltaInsertOp.js';
+import { DataType, ListType } from '../src/value-types.js';
+
+describe('DeltaInsertOp', () => {
+ describe('constructor', function () {
it('should instantiate', function () {
- var embed = new InsertDataQuill(DataType.Image, 'https://');
- var t = new DeltaInsertOp(embed);
+ const embed = new InsertDataQuill(DataType.Image, 'https://');
+ const t = new DeltaInsertOp(embed);
assert.equal(t instanceof DeltaInsertOp, true);
assert.equal(t.insert instanceof InsertDataQuill, true);
assert.equal(t.attributes instanceof Object, true);
- t = new DeltaInsertOp('test');
- assert.deepEqual(t.insert.value, 'test');
-
- t = new DeltaInsertOp(new InsertDataQuill(DataType.Formula, 'x=data'));
- assert.equal(t.insert.value, 'x=data');
- });
- });
-
- describe('isContainerBlock()', function () {
- it('should successfully check if the op is a block container', function () {
- var op = new DeltaInsertOp('test');
- assert.equal(op.isContainerBlock(), false);
-
- op = new DeltaInsertOp('test', { blockquote: true });
- assert.equal(op.isContainerBlock(), true);
- });
- });
-
- describe('hasSameAdiAs()', function () {
- it('should successfully if two ops have same align indent and direction', function () {
- var op1 = new DeltaInsertOp('\n', { align: AlignType.Right, indent: 2 });
- var op2 = new DeltaInsertOp('\n', { align: AlignType.Right, indent: 2 });
+ const t2 = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'test'));
+ assert.deepEqual(t2.insert.value, 'test');
- assert.ok(op1.hasSameAdiAs(op2));
-
- var op2 = new DeltaInsertOp('\n', { align: AlignType.Right, indent: 3 });
- assert.ok(!op1.hasSameAdiAs(op2));
+ const t3 = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Formula, 'x=data'),
+ );
+ assert.equal(t3.insert.value, 'x=data');
});
});
- describe('hasHigherIndentThan()', function () {
- it('should successfully if two ops have same align indent and direction', function () {
- var op1 = new DeltaInsertOp('\n', { indent: undefined });
- var op2 = new DeltaInsertOp('\n', { indent: undefined });
-
- assert.ok(!op1.hasHigherIndentThan(op2));
+ describe('isContainerBlock', function () {
+ it('should check if the op is a block container', function () {
+ const inlineOp = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'test'),
+ );
+ assert.equal(inlineOp.isContainerBlock(), false);
+
+ const blockOp = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'test'),
+ {
+ blockquote: true,
+ },
+ );
+ assert.equal(blockOp.isContainerBlock(), true);
});
});
- describe('isInline()', function () {
+ describe('isInline', function () {
it('should return true if op is an inline', function () {
- var op = new DeltaInsertOp('\n', {});
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, '\n'),
+ {},
+ );
assert.equal(op.isInline(), true);
});
});
describe('isJustNewline()', function () {
it('should return true if op is a list', function () {
- var op = new DeltaInsertOp('\n', {});
+ let op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {});
assert.equal(op.isJustNewline(), true);
- op = new DeltaInsertOp('\n\n ', { list: ListType.Ordered });
+ op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n\n '), {
+ list: ListType.Ordered,
+ });
assert.equal(op.isJustNewline(), false);
});
});
describe('isList()', function () {
it('should return true if op is a list', function () {
- var op = new DeltaInsertOp('\n', {});
+ let op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {});
assert.equal(op.isList(), false);
- op = new DeltaInsertOp('fds ', { list: ListType.Ordered });
+ op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'fds '), {
+ list: ListType.Ordered,
+ });
assert.equal(op.isList(), true);
- op = new DeltaInsertOp('fds ', { list: ListType.Unchecked });
+ op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'fds '), {
+ list: ListType.Unchecked,
+ });
assert.equal(op.isList(), true);
});
});
describe('isBulletList()', function () {
it('should return true if op is a bullet list', function () {
- var op = new DeltaInsertOp('\n', { list: ListType.Bullet });
+ let op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ });
assert.equal(op.isBulletList(), true);
- op = new DeltaInsertOp('fds ', { list: ListType.Ordered });
+ op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'fds '), {
+ list: ListType.Ordered,
+ });
assert.equal(op.isBulletList(), false);
});
});
describe('isOrderedList()', function () {
it('should return true if op is an ordered list', function () {
- var op = new DeltaInsertOp('\n', { list: ListType.Bullet });
+ let op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ });
assert.equal(op.isOrderedList(), false);
- op = new DeltaInsertOp('fds ', { list: ListType.Ordered });
+ op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'fds '), {
+ list: ListType.Ordered,
+ });
assert.equal(op.isOrderedList(), true);
});
});
- describe('isCheckedList()', function () {
+ describe('isCheckedList', function () {
it('should return true if op is an checked list', function () {
- var op = new DeltaInsertOp('\n', { list: ListType.Unchecked });
+ let op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Unchecked,
+ });
assert.equal(op.isCheckedList(), false);
- op = new DeltaInsertOp('fds ', { list: ListType.Checked });
+ op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'fds '), {
+ list: ListType.Checked,
+ });
assert.equal(op.isCheckedList(), true);
});
});
- describe('isUncheckedList()', function () {
+ describe('isUncheckedList', function () {
it('should return true if op is an unchecked list', function () {
- var op = new DeltaInsertOp('\n', { list: ListType.Bullet });
+ let op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ });
assert.equal(op.isUncheckedList(), false);
- op = new DeltaInsertOp('fds ', { list: ListType.Unchecked });
+ op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'fds '), {
+ list: ListType.Unchecked,
+ });
assert.equal(op.isUncheckedList(), true);
});
});
- describe('isSameListAs()', function () {
+ describe('isSameListAs', function () {
it('should return true if op list type same as the comparison', function () {
- var op = new DeltaInsertOp('\n', { list: ListType.Bullet });
- var op2 = new DeltaInsertOp('ds', { list: ListType.Bullet });
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ });
+ const op2 = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'ds'), {
+ list: ListType.Bullet,
+ });
assert.equal(op.isSameListAs(op2), true);
- var op3 = new DeltaInsertOp('fds ', { list: ListType.Ordered });
+ const op3 = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'fds '),
+ {
+ list: ListType.Ordered,
+ },
+ );
assert.equal(op.isSameListAs(op3), false);
});
});
- describe('isText()', function () {
- it('should correctly identify insert type', function () {
- var op = new DeltaInsertOp('\n', { list: ListType.Bullet });
- assert.equal(op.isVideo(), false);
- assert.equal(op.isText(), true);
-
- op = new DeltaInsertOp(new InsertDataQuill(DataType.Image, 'd'), {
- list: ListType.Ordered,
- });
- assert.equal(op.isImage(), true);
- assert.equal(op.isText(), false);
- });
- });
-
- describe('isVideo()/isImage()/isFormula()', function () {
- it('should correctly identify embed type', function () {
- var op = new DeltaInsertOp(new InsertDataQuill(DataType.Video, ''));
- assert.equal(op.isVideo(), true);
- assert.equal(op.isFormula(), false);
- assert.equal(op.isImage(), false);
-
- op = new DeltaInsertOp(new InsertDataQuill(DataType.Image, 'd'));
- assert.equal(op.isImage(), true);
- assert.equal(op.isFormula(), false);
-
- op = new DeltaInsertOp(new InsertDataQuill(DataType.Formula, 'd'));
- assert.equal(op.isVideo(), false);
- assert.equal(op.isFormula(), true);
- });
- });
-
- describe('isLink()', function () {
+ describe('isLink', () => {
it('should correctly identify if op is a link', function () {
- var op = new DeltaInsertOp(new InsertDataQuill(DataType.Video, ''), {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Video, ''), {
link: 'http://',
});
assert.equal(op.isLink(), false);
- op = new DeltaInsertOp('http', { link: 'http://' });
- assert.equal(op.isLink(), true);
+ const op2 = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'http'),
+ {
+ link: 'http://',
+ },
+ );
+ assert.equal(op2.isLink(), true);
});
});
});
diff --git a/test/InsertData.test.ts b/test/InsertData.test.ts
index f73ab78..2e33df1 100644
--- a/test/InsertData.test.ts
+++ b/test/InsertData.test.ts
@@ -1,31 +1,27 @@
-import 'mocha';
-import * as assert from 'assert';
+import { describe, it } from 'vitest';
+import { strict as assert } from 'node:assert';
+import { InsertDataQuill, InsertDataCustom } from './../src/InsertData.js';
+import { DataType } from './../src/value-types.js';
-import { InsertDataQuill, InsertDataCustom } from './../src/InsertData';
-import { DataType } from './../src/value-types';
+describe('InsertDataQuill', () => {
+ describe('constructor', () => {
+ it('should instantiate', () => {
+ const t1 = new InsertDataQuill(DataType.Video, 'https://');
+ assert.equal(t1.type === DataType.Video, true);
+ assert.equal(t1.value === 'https://', true);
-describe('InsertData', function () {
- describe('InsertDataQuill', function () {
- describe('constructor()', function () {
- it('should instantiate', function () {
- var t = new InsertDataQuill(DataType.Video, 'https://');
- assert.equal(t.type === 'video', true);
- assert.equal(t.value === 'https://', true);
-
- t = new InsertDataQuill(DataType.Text, 'hello');
- assert.equal(t.type === 'text', true);
- assert.equal(t.value === 'hello', true);
- });
+ const t2 = new InsertDataQuill(DataType.Text, 'hello');
+ assert.equal(t2.type === DataType.Text, true);
+ assert.equal(t2.value === 'hello', true);
});
});
+});
- describe('InsertDataCustom', function () {
- describe('constructor()', function () {
- it('should instantiate', function () {
- var t = new InsertDataCustom('biu', {});
- assert.equal(t.type === 'biu', true);
- assert.deepEqual(t.value, {});
- });
+describe('InsertDataCustom', () => {
+ describe('constructor', () => {
+ it('should instantiate', () => {
+ const instance = new InsertDataCustom({ yoyoyo: 1 });
+ assert.deepEqual(instance.value, { yoyoyo: 1 });
});
});
});
diff --git a/test/InsertOpDenormalizer.test.ts b/test/InsertOpDenormalizer.test.ts
deleted file mode 100644
index 9e6df44..0000000
--- a/test/InsertOpDenormalizer.test.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { InsertOpDenormalizer } from './../src/InsertOpDenormalizer';
-
-describe('InsertOpDenormalizer', function () {
- describe('#denormalize()', function () {
- it('should return denormalized op as array of ops', function () {
- var op = { insert: '\n' };
- var act = InsertOpDenormalizer.denormalize({ insert: '\n' });
- assert.deepEqual(act, [op]);
-
- op = { insert: 'abc' };
- act = InsertOpDenormalizer.denormalize(op);
- assert.deepEqual(act, [op]);
-
- var op2 = { insert: 'abc\n', attributes: { link: 'cold' } };
- act = InsertOpDenormalizer.denormalize(op2);
- assert.equal(act.length, 2);
- assert.equal(act[0].insert, 'abc');
- assert.equal(act[0].attributes.link, 'cold');
-
- var op3 = { insert: '\n\n', attributes: { bold: true } };
- act = InsertOpDenormalizer.denormalize(op3);
- assert.equal(act.length, 2);
- assert.equal(act[1].insert, '\n');
-
- act = InsertOpDenormalizer.denormalize(null);
- assert.deepEqual(act, []);
- act = InsertOpDenormalizer.denormalize('..');
- assert.deepEqual(act, []);
- });
- });
-});
diff --git a/test/InsertOpsConverter.test.ts b/test/InsertOpsConverter.test.ts
deleted file mode 100644
index 190caf1..0000000
--- a/test/InsertOpsConverter.test.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { DeltaInsertOp } from './../src/DeltaInsertOp';
-import { InsertDataQuill } from './../src/InsertData';
-import { InsertOpsConverter } from './../src/InsertOpsConverter';
-
-var data = [
- {
- ops: [
- { insert: 'This ' },
- { attributes: { font: 'monospace' }, insert: 'is' },
- { insert: ' a ' },
- { attributes: { size: 'large' }, insert: 'test' },
- { insert: ' ' },
- { attributes: { italic: true, bold: true }, insert: 'data' },
- { insert: ' ' },
- { attributes: { underline: true, strike: true }, insert: 'that' },
- { insert: ' is ' },
- { attributes: { color: '#e60000' }, insert: 'will' },
- { insert: ' ' },
- { attributes: { background: '#ffebcc' }, insert: 'test' },
- { insert: ' ' },
- { attributes: { script: 'sub' }, insert: 'the' },
- { insert: ' ' },
- { attributes: { script: 'super' }, insert: 'rendering' },
- { insert: ' of ' },
- { attributes: { link: 'yahoo' }, insert: 'inline' },
- { insert: ' ' },
- { insert: { formula: 'x=data' } },
- { insert: ' formats.\n' },
- ],
- html: [
- '',
- 'This ',
- 'is',
- ' a ',
- 'test',
- ' ',
- 'data',
- ' ',
- 'that',
- ' is ',
- 'will',
- ' ',
- 'test',
- ' ',
- 'the',
- ' ',
- 'rendering',
- ' of ',
- 'inline',
- ' ',
- 'x=data',
- ' formats.
',
- ].join(''),
- },
-];
-
-describe('InsertOpsConverter', function () {
- describe('#convert()', function () {
- it('should transform raw delta ops to DeltaInsertOp[]', function () {
- var objs = InsertOpsConverter.convert(data[0].ops, {});
-
- assert.equal(objs[0] instanceof DeltaInsertOp, true);
- assert.equal(objs[objs.length - 1] instanceof DeltaInsertOp, true);
- assert.deepEqual(InsertOpsConverter.convert(null, {}), []);
- assert.deepEqual(InsertOpsConverter.convert([{ insert: '' }], {}), []);
- assert.deepEqual(
- InsertOpsConverter.convert([{ insert: { cake: '' } }], {}),
- [{ insert: { type: 'cake', value: '' }, attributes: {} }]
- );
- assert.deepEqual(InsertOpsConverter.convert([{ insert: 2 }], {}), []);
- //console.log(objs);
- });
- });
-
- describe('#convertInsertVal()', function () {
- it('should convert raw .insert value to valid TInsert or null', function () {
- [null, undefined, 3, {}].forEach((v) => {
- var act = InsertOpsConverter.convertInsertVal(v, {});
- assert.equal(act, null);
- });
-
- ['fdsf', { image: 'ff' }, { video: '' }, { formula: '' }].forEach((v) => {
- var act = InsertOpsConverter.convertInsertVal(v, {});
- assert.notEqual(act, null);
- assert.ok(act instanceof InsertDataQuill);
- });
- });
- });
-});
diff --git a/test/OpAttributeSanitizer.test.ts b/test/OpAttributeSanitizer.test.ts
index 690ce65..1734f7a 100644
--- a/test/OpAttributeSanitizer.test.ts
+++ b/test/OpAttributeSanitizer.test.ts
@@ -1,33 +1,63 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { OpAttributeSanitizer } from './../src/OpAttributeSanitizer';
-import { ListType, AlignType, DirectionType } from './../src/value-types';
+import { describe, it } from 'vitest';
+import { strict as assert } from 'node:assert';
+import {
+ OpAttributeSanitizer,
+ OpAttributeSanitizerOptions,
+} from './../src/OpAttributeSanitizer.js';
+import { ListType, AlignType, DirectionType } from './../src/value-types.js';
describe('OpAttributeSanitizer', function () {
- describe('#IsValidHexColor()', function () {
- it('should return true if hex color is valid', function () {
- assert.ok(OpAttributeSanitizer.IsValidHexColor('#234'));
- assert.ok(OpAttributeSanitizer.IsValidHexColor('#f23'));
- assert.ok(OpAttributeSanitizer.IsValidHexColor('#fFe234'));
- assert.equal(OpAttributeSanitizer.IsValidHexColor('#g34'), false);
+ describe('isValidHexColor', function () {
+ it('should return true for valid HEX colors', () => {
+ assert.ok(OpAttributeSanitizer.isValidHexColor('#234'));
+ assert.ok(OpAttributeSanitizer.isValidHexColor('#f23'));
+ assert.ok(OpAttributeSanitizer.isValidHexColor('#fFe234'));
+ assert.equal(OpAttributeSanitizer.isValidHexColor('#g34'), false);
+ });
+
+ it('should return false for invalid strings', () => {
+ assert.equal(OpAttributeSanitizer.isValidHexColor('e34'), false);
+ assert.equal(OpAttributeSanitizer.isValidHexColor('123434'), false);
+ });
+ });
+
+ describe('isValidFontName', () => {
+ it('should return true for valid font names', () => {
+ assert.equal(
+ OpAttributeSanitizer.isValidFontName('gooD-ol times 2'),
+ true,
+ );
+ });
- assert.equal(OpAttributeSanitizer.IsValidHexColor('e34'), false);
- assert.equal(OpAttributeSanitizer.IsValidHexColor('123434'), false);
+ it('should return false for invalid strings', () => {
+ assert.equal(OpAttributeSanitizer.isValidFontName(''), false);
+ assert.equal(OpAttributeSanitizer.isValidHexColor('bad"str?'), false);
});
});
- describe('#IsValidFontName()', function () {
- it('should return true if font name is valid', function () {
- assert.ok(OpAttributeSanitizer.IsValidFontName('gooD-ol times 2'));
- assert.equal(OpAttributeSanitizer.IsValidHexColor('bad"times?'), false);
+ describe('isValidSize', () => {
+ it('should return true for valid sizes', function () {
+ assert.ok(OpAttributeSanitizer.isValidSize('bigfaT-size'));
+ });
+
+ it('should return false for invalid strings', () => {
+ assert.equal(OpAttributeSanitizer.isValidSize(''), false);
+ assert.equal(OpAttributeSanitizer.isValidSize('big-fat-size!'), false);
+ assert.equal(OpAttributeSanitizer.isValidSize('small.size?'), false);
});
});
- describe('#IsValidSize()', function () {
- it('should return true if size is valid', function () {
- assert.ok(OpAttributeSanitizer.IsValidSize('bigfaT-size'));
- assert.equal(OpAttributeSanitizer.IsValidSize('small.sizetimes?'), false);
+ describe('isValidTarget', () => {
+ it('should return true for valid targets', () => {
+ ['_self', '_blank', '_parent', '_top'].forEach((target) => {
+ assert.ok(OpAttributeSanitizer.isValidTarget(target));
+ });
+ });
+
+ it('should return false for invalid strings', () => {
+ assert.equal(OpAttributeSanitizer.isValidTarget('<'), false);
+ assert.equal(OpAttributeSanitizer.isValidTarget('~'), false);
+ assert.equal(OpAttributeSanitizer.isValidTarget('_blank+'), false);
});
});
@@ -53,7 +83,7 @@ describe('OpAttributeSanitizer', function () {
assert.equal(OpAttributeSanitizer.IsValidColorLiteral('red1'), false);
assert.equal(
OpAttributeSanitizer.IsValidColorLiteral('red-green'),
- false
+ false,
);
assert.equal(OpAttributeSanitizer.IsValidColorLiteral(''), false);
});
@@ -70,11 +100,11 @@ describe('OpAttributeSanitizer', function () {
assert.equal(OpAttributeSanitizer.IsValidRGBColor('rgb(260,0,0)'), false);
assert.equal(
OpAttributeSanitizer.IsValidRGBColor('rgb(2000,0,0)'),
- false
+ false,
);
});
});
- describe('#IsValidRel()', function () {
+ describe('IsValidRel', function () {
it('should return true if rel is valid', function () {
assert.ok(OpAttributeSanitizer.IsValidRel('nofollow'));
assert.ok(OpAttributeSanitizer.IsValidRel('tag'));
@@ -84,7 +114,7 @@ describe('OpAttributeSanitizer', function () {
assert.equal(OpAttributeSanitizer.IsValidRel(''), false);
});
});
- describe('#IsValidLang()', function () {
+ describe('IsValidLang', function () {
it('should return true if lang is valid', function () {
assert.ok(OpAttributeSanitizer.IsValidLang('javascript'));
assert.ok(OpAttributeSanitizer.IsValidLang(true));
@@ -95,49 +125,25 @@ describe('OpAttributeSanitizer', function () {
});
});
- describe('#sanitize()', function () {
- it('should return empty object', function () {
- [null, 3, undefined, 'fd'].forEach((v) => {
- assert.deepEqual(OpAttributeSanitizer.sanitize(v, {}), {});
- });
- });
-
- var attrs = {
- bold: 'nonboolval',
- color: '#12345H',
- background: '#333',
- font: 'times new roman',
- size: 'x.large',
- link: 'http://<',
- script: 'supper',
- list: ListType.Ordered,
- header: '3',
- indent: 40,
- direction: DirectionType.Rtl,
- align: AlignType.Center,
- width: '3',
- customAttr1: 'shouldnt be touched',
- mentions: true,
- mention: {
- class: 'A-cls-9',
- id: 'An-id_9:.',
- target: '_blank',
- avatar: 'http://www.yahoo.com',
- 'end-point': 'http://abc.com',
- slug: 'my-name',
- },
+ describe('sanitize', () => {
+ const noopSanitizeOptions: OpAttributeSanitizerOptions = {
+ urlSanitizer: (url) => url,
};
- it('should return sanitized attributes', function () {
- assert.deepEqual(OpAttributeSanitizer.sanitize(attrs, {}), {
- bold: true,
+
+ it('should return sanitized attributes', () => {
+ const attrs = {
+ bold: 'nonboolval',
+ color: '#12345H',
background: '#333',
font: 'times new roman',
- link: 'http://<',
- list: 'ordered',
- header: 3,
- indent: 30,
- direction: 'rtl',
- align: 'center',
+ size: 'x.large',
+ link: 'http://<',
+ script: 'supper',
+ list: ListType.Ordered,
+ header: '3',
+ indent: 40,
+ direction: DirectionType.Rtl,
+ align: AlignType.Center,
width: '3',
customAttr1: 'shouldnt be touched',
mentions: true,
@@ -146,43 +152,106 @@ describe('OpAttributeSanitizer', function () {
id: 'An-id_9:.',
target: '_blank',
avatar: 'http://www.yahoo.com',
- 'end-point': 'http://abc.com',
slug: 'my-name',
},
- });
+ };
+ assert.deepEqual(
+ OpAttributeSanitizer.sanitize(attrs, noopSanitizeOptions),
+ {
+ bold: true,
+ background: '#333',
+ font: 'times new roman',
+ link: 'http://<',
+ list: 'ordered',
+ header: 3,
+ indent: 30,
+ direction: 'rtl',
+ align: 'center',
+ width: '3',
+ customAttr1: 'shouldnt be touched',
+ mentions: true,
+ mention: {
+ class: 'A-cls-9',
+ id: 'An-id_9:.',
+ target: '_blank',
+ avatar: 'http://www.yahoo.com',
+ slug: 'my-name',
+ },
+ },
+ );
+ });
+ it('should sanitize mentions', () => {
assert.deepEqual(
OpAttributeSanitizer.sanitize(
- {
+ {
mentions: true,
mention: 1,
},
- {}
+ noopSanitizeOptions,
),
- {}
+ {
+ mentions: true,
+ mention: {},
+ },
);
+ });
- assert.deepEqual(OpAttributeSanitizer.sanitize({ header: 1 }, {}), {
- header: 1,
- });
+ it('should keep a valid header value of 1', () => {
assert.deepEqual(
- OpAttributeSanitizer.sanitize({ header: undefined }, {}),
- {}
+ OpAttributeSanitizer.sanitize({ header: 1 }, noopSanitizeOptions),
+ {
+ header: 1,
+ },
);
- assert.deepEqual(OpAttributeSanitizer.sanitize({ header: 100 }, {}), {
- header: 6,
- });
+ });
+
+ it('should exclude an undefined header value', () => {
assert.deepEqual(
- OpAttributeSanitizer.sanitize({ align: AlignType.Center }, {}),
- { align: 'center' }
+ OpAttributeSanitizer.sanitize(
+ { header: undefined },
+ noopSanitizeOptions,
+ ),
+ {},
);
+ });
+
+ it('should clamp a header value to 6', () => {
assert.deepEqual(
- OpAttributeSanitizer.sanitize({ direction: DirectionType.Rtl }, {}),
- { direction: 'rtl' }
+ OpAttributeSanitizer.sanitize({ header: 100 }, noopSanitizeOptions),
+ {
+ header: 6,
+ },
+ );
+ });
+
+ it('should keep a valid align value', () => {
+ assert.deepEqual(
+ OpAttributeSanitizer.sanitize(
+ { align: AlignType.Center },
+ noopSanitizeOptions,
+ ),
+ { align: 'center' },
+ );
+ });
+
+ it('should keep a valid direction value', () => {
+ assert.deepEqual(
+ OpAttributeSanitizer.sanitize(
+ { direction: DirectionType.Rtl },
+ noopSanitizeOptions,
+ ),
+ { direction: 'rtl' },
+ );
+ });
+
+ it('should keep a valid indent value', () => {
+ assert.deepEqual(
+ OpAttributeSanitizer.sanitize({ indent: 2 }, noopSanitizeOptions),
+ {
+ indent: 2,
+ },
);
- assert.deepEqual(OpAttributeSanitizer.sanitize({ indent: 2 }, {}), {
- indent: 2,
- });
});
});
});
diff --git a/test/OpToHtmlConverter.test.ts b/test/OpToHtmlConverter.test.ts
deleted file mode 100644
index a0aec11..0000000
--- a/test/OpToHtmlConverter.test.ts
+++ /dev/null
@@ -1,536 +0,0 @@
-import {
- OpToHtmlConverter,
- IOpToHtmlConverterOptions,
-} from './../src/OpToHtmlConverter';
-import { DeltaInsertOp } from './../src/DeltaInsertOp';
-import { InsertDataQuill } from './../src/InsertData';
-import {
- ScriptType,
- DirectionType,
- AlignType,
- DataType,
-} from './../src/value-types';
-
-let assert = require('assert');
-
-describe('OpToHtmlConverter', function () {
- describe('constructor()', function () {
- var op = new DeltaInsertOp('hello');
- it('should instantiate just fine :)', function () {
- var conv = new OpToHtmlConverter(op);
- assert.equal(conv instanceof OpToHtmlConverter, true);
- });
- });
-
- describe('prefixClass()', function () {
- it('should prefix class if an empty string prefix is not given', () => {
- var op = new DeltaInsertOp('aa');
- var c = new OpToHtmlConverter(op, { classPrefix: '' });
- var act = c.prefixClass('my-class');
- assert.equal(act, 'my-class');
-
- c = new OpToHtmlConverter(op, { classPrefix: 'xx' });
- act = c.prefixClass('my-class');
- assert.equal(act, 'xx-my-class');
-
- c = new OpToHtmlConverter(op);
- act = c.prefixClass('my-class');
- assert.equal(act, 'ql-my-class');
- });
- });
-
- describe('getCssStyles()', function () {
- var op = new DeltaInsertOp('hello');
- it('should return styles', () => {
- var c = new OpToHtmlConverter(op);
- assert.deepEqual(c.getCssStyles(), []);
-
- var o = new DeltaInsertOp('f', { background: 'red', attr1: 'red' });
- c = new OpToHtmlConverter(o, {
- customCssStyles: (op) => {
- if (op.attributes['attr1']) {
- return `color:${op.attributes['attr1']}`;
- }
- },
- });
- assert.deepEqual(c.getCssStyles(), ['color:red', 'background-color:red']);
-
- new DeltaInsertOp('f', { background: 'red', attr1: 'red' });
- c = new OpToHtmlConverter(o, {
- customCssStyles: (op) => {
- if (op.attributes['attr1']) {
- return [`color:${op.attributes['attr1']}`];
- }
- },
- });
- assert.deepEqual(c.getCssStyles(), ['color:red', 'background-color:red']);
-
- o = new DeltaInsertOp('f', { background: 'red', color: 'blue' });
- c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getCssStyles(), [
- 'color:blue',
- 'background-color:red',
- ]);
-
- c = new OpToHtmlConverter(o, { allowBackgroundClasses: true });
- assert.deepEqual(c.getCssStyles(), ['color:blue']);
- });
-
- it('should return inline styles', function () {
- var op = new DeltaInsertOp('hello');
- var c = new OpToHtmlConverter(op, { inlineStyles: {} });
- assert.deepEqual(c.getCssStyles(), []);
-
- var attrs = {
- indent: 1,
- align: AlignType.Center,
- direction: DirectionType.Rtl,
- font: 'roman',
- size: 'small',
- background: 'red',
- };
- var o = new DeltaInsertOp('f', attrs);
- c = new OpToHtmlConverter(o, { inlineStyles: {} });
- var styles = [
- 'background-color:red',
- 'padding-right:3em',
- 'text-align:center',
- 'direction:rtl',
- 'font-family:roman',
- 'font-size: 0.75em',
- ];
- assert.deepEqual(c.getCssStyles(), styles);
-
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Image, ''), attrs);
- c = new OpToHtmlConverter(o, { inlineStyles: {} });
- assert.deepEqual(c.getCssStyles(), styles);
-
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Video, ''), attrs);
- c = new OpToHtmlConverter(o, { inlineStyles: {} });
- assert.deepEqual(c.getCssStyles(), styles);
-
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Formula, ''), attrs);
- c = new OpToHtmlConverter(o, { inlineStyles: {} });
- assert.deepEqual(c.getCssStyles(), styles);
-
- o = new DeltaInsertOp('f', attrs);
- c = new OpToHtmlConverter(o, { inlineStyles: {} });
- assert.deepEqual(c.getCssStyles(), styles);
-
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Image, ''), {
- direction: DirectionType.Rtl,
- });
- c = new OpToHtmlConverter(o, { inlineStyles: {} });
- assert.deepEqual(c.getCssStyles(), ['direction:rtl; text-align:inherit']);
-
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Image, ''), {
- indent: 2,
- });
- c = new OpToHtmlConverter(o, { inlineStyles: {} });
- assert.deepEqual(c.getCssStyles(), ['padding-left:6em']);
-
- // Ignore invalid direction
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Image, ''), {
- direction: 'ltr',
- } as any);
- c = new OpToHtmlConverter(o, { inlineStyles: {} });
- assert.deepEqual(c.getCssStyles(), []);
- });
-
- it('should allow setting inline styles', function () {
- var op = new DeltaInsertOp('f', { size: 'huge' });
- var c = new OpToHtmlConverter(op, {
- inlineStyles: {
- size: {
- huge: 'font-size: 6em',
- },
- },
- });
- assert.deepEqual(c.getCssStyles(), ['font-size: 6em']);
- });
-
- it('should fall back to defaults for inline styles that are not specified', function () {
- // Here there's no inlineStyle specified for "size", but we still render it
- // because we fall back to the default.
- var op = new DeltaInsertOp('f', { size: 'huge' });
- var c = new OpToHtmlConverter(op, {
- inlineStyles: {
- font: {
- serif: 'font-family: serif',
- },
- },
- });
- assert.deepEqual(c.getCssStyles(), ['font-size: 2.5em']);
- });
-
- it('should render default font inline styles correctly', function () {
- var op = new DeltaInsertOp('f', { font: 'monospace' });
- var c = new OpToHtmlConverter(op, { inlineStyles: {} });
- assert.deepEqual(c.getCssStyles(), [
- 'font-family: Monaco, Courier New, monospace',
- ]);
- });
-
- it('should return nothing for an inline style with no mapped entry', function () {
- var op = new DeltaInsertOp('f', { size: 'biggest' });
- var c = new OpToHtmlConverter(op, {
- inlineStyles: {
- size: {
- small: 'font-size: 0.75em',
- },
- },
- });
- assert.deepEqual(c.getCssStyles(), []);
- });
-
- it('should return nothing for an inline style where the converter returns undefined', function () {
- var op = new DeltaInsertOp('f', { size: 'biggest' });
- var c = new OpToHtmlConverter(op, {
- inlineStyles: {
- size: () => undefined,
- },
- });
- assert.deepEqual(c.getCssStyles(), []);
- });
- });
-
- describe('getCssClasses()', function () {
- it('should return prefixed classes', () => {
- var op = new DeltaInsertOp('hello');
- const options: IOpToHtmlConverterOptions = {
- customCssClasses: (op) => {
- if (op.attributes.size === 'small') {
- return ['small-size'];
- }
- },
- };
- var c = new OpToHtmlConverter(op, options);
- assert.deepEqual(c.getCssClasses(), []);
-
- var attrs = {
- indent: 1,
- align: AlignType.Center,
- direction: DirectionType.Rtl,
- font: 'roman',
- size: 'small',
- background: 'red',
- };
- var o = new DeltaInsertOp('f', attrs);
- c = new OpToHtmlConverter(o, options);
- var classes = [
- 'small-size',
- 'ql-indent-1',
- 'ql-align-center',
- 'ql-direction-rtl',
- 'ql-font-roman',
- 'ql-size-small',
- ];
- assert.deepEqual(c.getCssClasses(), classes);
-
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Image, ''), attrs);
- c = new OpToHtmlConverter(o, options);
- assert.deepEqual(c.getCssClasses(), classes.concat('ql-image'));
-
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Video, ''), attrs);
- c = new OpToHtmlConverter(o, options);
- assert.deepEqual(c.getCssClasses(), classes.concat('ql-video'));
-
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Formula, ''), attrs);
- c = new OpToHtmlConverter(o, options);
- assert.deepEqual(c.getCssClasses(), classes.concat('ql-formula'));
-
- o = new DeltaInsertOp('f', attrs);
- c = new OpToHtmlConverter(o, {
- ...options,
- allowBackgroundClasses: true,
- });
- assert.deepEqual(c.getCssClasses(), classes.concat('ql-background-red'));
- });
-
- it('should return no classes if `inlineStyles` is specified', function () {
- var attrs = {
- indent: 1,
- align: AlignType.Center,
- direction: DirectionType.Rtl,
- font: 'roman',
- size: 'small',
- background: 'red',
- };
- var o = new DeltaInsertOp('f', attrs);
- var c = new OpToHtmlConverter(o, { inlineStyles: {} });
- assert.deepEqual(c.getCssClasses(), []);
- });
- });
-
- describe('getTags()', function () {
- it('should return tags to render this op', () => {
- var op = new DeltaInsertOp('hello');
- var c = new OpToHtmlConverter(op);
- assert.deepEqual(c.getTags(), []);
-
- var o = new DeltaInsertOp('', { code: true });
- c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getTags(), ['code']);
-
- [
- ['image', 'img'],
- ['video', 'iframe'],
- ['formula', 'span'],
- ].forEach((item: DataType[]) => {
- o = new DeltaInsertOp(new InsertDataQuill(item[0], ''));
- c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getTags(), [item[1]]);
- });
-
- [
- ['blockquote', 'blockquote'],
- ['code-block', 'pre'],
- ['list', 'li'],
- ['header', 'h2'],
- ].forEach((item) => {
- o = new DeltaInsertOp('', { [item[0]]: true, header: 2 });
- c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getTags(), [item[1]]);
- });
-
- [
- ['blockquote', 'blockquote'],
- ['code-block', 'div'],
- ['bold', 'h2'],
- ['list', 'li'],
- ['header', 'h2'],
- ].forEach((item) => {
- o = new DeltaInsertOp('', { [item[0]]: true, header: 2 });
- c = new OpToHtmlConverter(o, {
- customTag: (format) => {
- if (format === 'code-block') {
- return 'div';
- }
- if (format === 'bold') {
- return 'b';
- }
- },
- });
- assert.deepEqual(c.getTags(), [item[1]]);
- });
-
- [
- ['blockquote', 'blockquote'],
- ['code-block', 'pre'],
- ['list', 'li'],
- ['attr1', 'attr1'],
- ].forEach((item) => {
- o = new DeltaInsertOp('', { [item[0]]: true, renderAsBlock: true });
- c = new OpToHtmlConverter(o, {
- customTag: (format, op) => {
- if (format === 'renderAsBlock' && op.attributes['attr1']) {
- return 'attr1';
- }
- },
- });
- assert.deepEqual(c.getTags(), [item[1]]);
- });
-
- var attrs = {
- link: 'http',
- script: ScriptType.Sub,
- bold: true,
- italic: true,
- strike: true,
- underline: true,
- attr1: true,
- };
- o = new DeltaInsertOp('', attrs);
- c = new OpToHtmlConverter(o, {
- customTag: (format) => {
- if (format === 'bold') {
- return 'b';
- }
- if (format === 'attr1') {
- return 'attr2';
- }
- },
- });
- assert.deepEqual(c.getTags(), ['a', 'sub', 'b', 'em', 's', 'u', 'attr2']);
- });
- });
-
- describe('getTagAttributes()', function () {
- it('should return tag attributes', () => {
- var op = new DeltaInsertOp('hello');
- var c = new OpToHtmlConverter(op);
- assert.deepEqual(c.getTagAttributes(), []);
-
- var o = new DeltaInsertOp('', { code: true, color: 'red' });
- var c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getTagAttributes(), []);
-
- var o = new DeltaInsertOp(new InsertDataQuill(DataType.Image, 'http:'), {
- color: 'red',
- });
- var c = new OpToHtmlConverter(o, {
- customTagAttributes: (op) => {
- if (op.attributes.color) {
- return {
- 'data-color': op.attributes.color,
- };
- }
- },
- });
- assert.deepEqual(c.getTagAttributes(), [
- { key: 'data-color', value: 'red' },
- { key: 'class', value: 'ql-image' },
- { key: 'src', value: 'http:' },
- ]);
-
- var o = new DeltaInsertOp(new InsertDataQuill(DataType.Image, 'http:'), {
- width: '200',
- });
- var c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getTagAttributes(), [
- { key: 'class', value: 'ql-image' },
- { key: 'width', value: '200' },
- { key: 'src', value: 'http:' },
- ]);
-
- var o = new DeltaInsertOp(new InsertDataQuill(DataType.Formula, '-'), {
- color: 'red',
- });
- var c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getTagAttributes(), [
- { key: 'class', value: 'ql-formula' },
- ]);
-
- var o = new DeltaInsertOp(new InsertDataQuill(DataType.Video, 'http:'), {
- color: 'red',
- });
- var c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getTagAttributes(), [
- { key: 'class', value: 'ql-video' },
- { key: 'frameborder', value: '0' },
- { key: 'allowfullscreen', value: 'true' },
- { key: 'src', value: 'http:' },
- ]);
-
- var o = new DeltaInsertOp('link', { color: 'red', link: 'l' });
-
- var c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getTagAttributes(), [
- { key: 'style', value: 'color:red' },
- { key: 'href', value: 'l' },
- ]);
-
- var c = new OpToHtmlConverter(o, { linkRel: 'nofollow' });
- assert.deepEqual(c.getTagAttributes(), [
- { key: 'style', value: 'color:red' },
- { key: 'href', value: 'l' },
- { key: 'rel', value: 'nofollow' },
- ]);
-
- var o = new DeltaInsertOp('', { 'code-block': 'javascript' });
- var c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getTagAttributes(), [
- { key: 'data-language', value: 'javascript' },
- ]);
-
- var o = new DeltaInsertOp('', { 'code-block': true });
- var c = new OpToHtmlConverter(o);
- assert.deepEqual(c.getTagAttributes(), []);
- });
- });
-
- describe('getContent()', function () {
- it('should return proper content depending on type', () => {
- var o = new DeltaInsertOp('aa', { indent: 1 });
- var c = new OpToHtmlConverter(o);
- assert.equal(c.getContent(), '');
-
- o = new DeltaInsertOp('sss<&>,', { bold: true });
- c = new OpToHtmlConverter(o);
- assert.equal(c.getContent(), 'sss<&>,');
-
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Formula, 'ff'), {
- bold: true,
- });
- c = new OpToHtmlConverter(o);
- assert.equal(c.getContent(), 'ff');
-
- o = new DeltaInsertOp(new InsertDataQuill(DataType.Video, 'ff'), {
- bold: true,
- });
- c = new OpToHtmlConverter(o);
- assert.equal(c.getContent(), '');
- });
- });
-
- describe('html retrieval', function () {
- var attributes = {
- link: 'http://',
- bold: true,
- italic: true,
- underline: true,
- strike: true,
- script: ScriptType.Super,
- font: 'verdana',
- size: 'small',
- color: 'red',
- background: '#fff',
- };
- var op1 = new DeltaInsertOp('aaa', attributes);
- var c1 = new OpToHtmlConverter(op1);
- var result = [
- '',
- '',
- 'aaa',
- '',
- '',
- ].join('');
-
- describe('getHtmlParts()', function () {
- it('should return inline html', () => {
- var op = new DeltaInsertOp('');
- var c1 = new OpToHtmlConverter(op);
- var act = c1.getHtmlParts();
- assert.equal(act.closingTag + act.content + act.openingTag, '');
-
- c1 = new OpToHtmlConverter(op1);
- act = c1.getHtmlParts();
- assert.equal(act.openingTag + act.content + act.closingTag, result);
- });
- });
-
- describe('getHtml()', function () {
- it('should return inline html', () => {
- c1 = new OpToHtmlConverter(op1);
- var act = c1.getHtml();
- assert.equal(act, result);
-
- var op = new DeltaInsertOp('\n', { bold: true });
- c1 = new OpToHtmlConverter(op, { encodeHtml: false });
- assert.equal(c1.getHtml(), '\n');
-
- var op = new DeltaInsertOp('\n', { color: '#fff' });
- c1 = new OpToHtmlConverter(op);
- assert.equal(c1.getHtml(), '\n');
-
- var op = new DeltaInsertOp('\n', { 'code-block': 'javascript' });
- c1 = new OpToHtmlConverter(op);
- assert.equal(c1.getHtml(), '');
-
- var op = new DeltaInsertOp(
- new InsertDataQuill(DataType.Image, 'http://')
- );
- c1 = new OpToHtmlConverter(op, {
- customCssClasses: (_) => {
- return 'ql-custom';
- },
- });
- assert.equal(
- c1.getHtml(),
- '
'
- );
- });
- });
- });
-});
diff --git a/test/QuillDeltaToHtmlConverter.test.ts b/test/QuillDeltaToHtmlConverter.test.ts
deleted file mode 100644
index 5a04560..0000000
--- a/test/QuillDeltaToHtmlConverter.test.ts
+++ /dev/null
@@ -1,1033 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { DeltaInsertOp } from './../src/DeltaInsertOp';
-import { QuillDeltaToHtmlConverter } from './../src/QuillDeltaToHtmlConverter';
-import { callWhenXEqualY } from './_helper';
-
-import { delta1 } from './data/delta1';
-import { GroupType, ListType } from './../src/value-types';
-import { encodeHtml } from './../src/funcs-html';
-
-describe('QuillDeltaToHtmlConverter', function () {
- describe('constructor()', function () {
- var hugeOps = [
- { insert: 'huge', attributes: { size: 'huge', attr1: 'red' } },
- { insert: '\n' },
- ];
-
- it('should instantiate return proper html', function () {
- var qdc = new QuillDeltaToHtmlConverter(delta1.ops, {
- classPrefix: 'noz',
- });
- var html = qdc.convert();
- assert.equal(html, delta1.html);
- });
-
- it('should set default inline styles for `inlineStyles: true`', function () {
- var qdc = new QuillDeltaToHtmlConverter(hugeOps, {
- inlineStyles: true,
- customCssStyles: (op) => {
- if (op.attributes['attr1'] === 'red') {
- return ['color:red'];
- }
- },
- });
- var html = qdc.convert();
- assert.equal(
- html.includes('huge'),
- true,
- html
- );
- });
-
- it('should set default inline styles when `inlineStyles` is a truthy non-object', function () {
- var qdc = new QuillDeltaToHtmlConverter(hugeOps, {
- inlineStyles: 1,
- } as any);
- var html = qdc.convert();
- assert.equal(
- html.includes('huge'),
- true,
- html
- );
- });
-
- it('should allow setting inline styles', function () {
- var qdc = new QuillDeltaToHtmlConverter(hugeOps, {
- inlineStyles: {
- size: {
- huge: 'font-size: 6em',
- },
- },
- });
- var html = qdc.convert();
- assert.equal(
- html.includes('huge'),
- true,
- html
- );
- });
- });
-
- describe('convert()', function () {
- var ops2 = [
- { insert: 'this is text' },
- { insert: '\n' },
- { insert: 'this is code' },
- { insert: '\n', attributes: { 'code-block': true } },
- { insert: 'this is code TOO!' },
- { insert: '\n', attributes: { 'code-block': true } },
- ];
-
- it('should render html', function () {
- var qdc = new QuillDeltaToHtmlConverter(ops2);
-
- var html = qdc.convert();
- assert.equal(html.indexOf('this is code') > -1, true, html);
- });
-
- it('should render mention', function () {
- let ops = [
- {
- insert: 'mention',
- attributes: {
- mentions: true,
- mention: {
- 'end-point': 'http://abc.com',
- slug: 'a',
- class: 'abc',
- target: '_blank',
- },
- },
- },
- ];
- var qdc = new QuillDeltaToHtmlConverter(ops);
- var html = qdc.convert();
- assert.equal(
- html,
- [
- 'mention
',
- ].join('')
- );
-
- var qdc = new QuillDeltaToHtmlConverter([
- {
- insert: 'mention',
- attributes: {
- mentions: true,
- mention: { slug: 'aa' },
- },
- },
- ]);
- var html = qdc.convert();
- assert.equal(
- html,
- ['mention
'].join('')
- );
- });
- it('should render links with rels', function () {
- var ops = [
- {
- attributes: {
- link: '#',
- rel: 'nofollow noopener',
- },
- insert: 'external link',
- },
- {
- attributes: {
- link: '#',
- },
- insert: 'internal link',
- },
- ];
- var qdc = new QuillDeltaToHtmlConverter(ops, {
- linkRel: 'license',
- });
- var html = qdc.convert();
- assert.equal(
- html,
- 'external linkinternal link
'
- );
-
- qdc = new QuillDeltaToHtmlConverter(ops);
- html = qdc.convert();
- assert.equal(
- html,
- 'external linkinternal link
'
- );
- });
- it('should render image and image links', function () {
- let ops = [
- { insert: { image: 'http://yahoo.com/abc.jpg' } },
- {
- insert: { image: 'http://yahoo.com/def.jpg' },
- attributes: { link: 'http://aha' },
- },
- ];
- let qdc = new QuillDeltaToHtmlConverter(ops);
- let html = qdc.convert();
- assert.equal(
- html,
- [
- '',
- '
',
- '',
- '
',
- '',
- '
',
- ].join('')
- );
- });
-
- it('should open and close list tags', function () {
- var ops4 = [
- { insert: 'mr\n' },
- { insert: 'hello' },
- { insert: '\n', attributes: { list: 'ordered' } },
- { insert: 'there' },
- { insert: '\n', attributes: { list: 'bullet' } },
- { insert: '\n', attributes: { list: 'ordered' } },
- ];
- var qdc = new QuillDeltaToHtmlConverter(ops4);
- var html = qdc.convert();
-
- assert.equal(html.indexOf('mr') > -1, true);
- assert.equal(html.indexOf('
- there') > -1, true);
- });
-
- it('should render as separate paragraphs', function () {
- var ops4 = [{ insert: 'hello\nhow areyou?\n\nbye' }];
- var qdc = new QuillDeltaToHtmlConverter(ops4, {
- multiLineParagraph: false,
- });
- var html = qdc.convert();
-
- assert.equal(
- html,
- '
hello
how areyou?
bye
'
- );
- });
-
- it('should create checked/unchecked lists', function () {
- var ops4 = [
- { insert: 'hello' },
- { insert: '\n', attributes: { list: 'checked' } },
- { insert: 'there' },
- { insert: '\n', attributes: { list: 'unchecked' } },
- { insert: 'man' },
- { insert: '\n', attributes: { list: 'checked' } },
- { insert: 'not done' },
- { insert: '\n', attributes: { indent: 1, list: 'unchecked' } },
- ];
- var qdc = new QuillDeltaToHtmlConverter(ops4);
- var html = qdc.convert();
- assert.equal(
- html,
- [
- '',
- '- hello
',
- '- there
',
- '- man',
- '',
- '
',
- '
',
- ].join('')
- );
- });
-
- it('should wrap positional styles in right tag', function () {
- var ops4 = [
- { insert: 'mr' },
- { insert: '\n', attributes: { align: 'center' } },
- { insert: '\n', attributes: { direction: 'rtl' } },
- { insert: '\n', attributes: { indent: 2 } },
- ];
- var qdc = new QuillDeltaToHtmlConverter(ops4, { paragraphTag: 'div' });
- var html = qdc.convert();
- assert.equal(html.indexOf(' -1, true);
- assert.equal(html.indexOf('
-1, true);
- assert.equal(html.indexOf('
-1, true);
- });
- it('should render target attr correctly', () => {
- let ops = [
- { attributes: { target: '_self', link: 'http://#' }, insert: 'A' },
- { attributes: { target: '_blank', link: 'http://#' }, insert: 'B' },
- { attributes: { link: 'http://#' }, insert: 'C' },
- { insert: '\n' },
- ];
- let qdc = new QuillDeltaToHtmlConverter(ops, { linkTarget: '' });
- let html = qdc.convert();
- assert.equal(
- html,
- [
- `
A`,
- `B`,
- `C
`,
- ].join('')
- );
-
- qdc = new QuillDeltaToHtmlConverter(ops);
- html = qdc.convert();
- assert.equal(
- html,
- [
- `
A`,
- `B`,
- `C
`,
- ].join('')
- );
-
- qdc = new QuillDeltaToHtmlConverter(ops, { linkTarget: '_top' });
- html = qdc.convert();
- assert.equal(
- html,
- [
- `
A`,
- `B`,
- `C
`,
- ].join('')
- );
- });
-
- it('should convert using custom url sanitizer', () => {
- let ops = [
- { attributes: { link: 'http://yahoo<%=abc%>/ed' }, insert: 'test' },
- { attributes: { link: 'http://abc<' }, insert: 'hi' },
- ];
-
- let qdc = new QuillDeltaToHtmlConverter(ops, {
- urlSanitizer: (link: string) => {
- if (link.indexOf('<%') > -1) {
- return link;
- }
- return undefined;
- },
- });
- assert.equal(
- qdc.convert(),
- [
- `
test`,
- `hi
`,
- ].join('')
- );
- });
-
- it('should render empty table', () => {
- let ops = [
- {
- insert: '\n\n\n',
- attributes: {
- table: 'row-1',
- },
- },
- {
- attributes: {
- table: 'row-2',
- },
- insert: '\n\n\n',
- },
- {
- attributes: {
- table: 'row-3',
- },
- insert: '\n\n\n',
- },
- {
- insert: '\n',
- },
- ];
-
- let qdc = new QuillDeltaToHtmlConverter(ops);
- assert.equal(
- qdc.convert(),
- [
- `
`,
- `
`,
- ].join('')
- );
- });
-
- it('should render singe cell table', () => {
- let ops = [
- {
- insert: 'cell',
- },
- {
- insert: '\n',
- attributes: {
- table: 'row-1',
- },
- },
- ];
-
- let qdc = new QuillDeltaToHtmlConverter(ops);
- assert.equal(
- qdc.convert(),
- [
- `
`,
- ].join('')
- );
- });
-
- it('should render filled table', () => {
- let ops = [
- {
- insert: '11',
- },
- {
- attributes: {
- table: 'row-1',
- },
- insert: '\n',
- },
- {
- insert: '12',
- },
- {
- attributes: {
- table: 'row-1',
- },
- insert: '\n',
- },
- {
- insert: '13',
- },
- {
- attributes: {
- table: 'row-1',
- },
- insert: '\n',
- },
- {
- insert: '21',
- },
- {
- attributes: {
- table: 'row-2',
- },
- insert: '\n',
- },
- {
- insert: '22',
- },
- {
- attributes: {
- table: 'row-2',
- },
- insert: '\n',
- },
- {
- insert: '23',
- },
- {
- attributes: {
- table: 'row-2',
- },
- insert: '\n',
- },
- {
- insert: '31',
- },
- {
- attributes: {
- table: 'row-3',
- },
- insert: '\n',
- },
- {
- insert: '32',
- },
- {
- attributes: {
- table: 'row-3',
- },
- insert: '\n',
- },
- {
- insert: '33',
- },
- {
- attributes: {
- table: 'row-3',
- },
- insert: '\n',
- },
- {
- insert: '\n',
- },
- ];
-
- let qdc = new QuillDeltaToHtmlConverter(ops);
- assert.equal(
- qdc.convert(),
- [
- `
`,
- `| 11 | 12 | 13 |
`,
- `| 21 | 22 | 23 |
`,
- `| 31 | 32 | 33 |
`,
- `
`,
- `
`,
- ].join('')
- );
- });
- });
-
- describe('custom types', () => {
- it(`should return empty string if renderer not defined for
- custom blot`, () => {
- let ops = [{ insert: { customstuff: 'my val' } }];
- let qdc = new QuillDeltaToHtmlConverter(ops);
- assert.equal(qdc.convert(), '
');
- });
- it('should render custom insert types with given renderer', () => {
- let ops = [
- { insert: { bolditalic: 'my text' } },
- { insert: { blah: 1 } },
- ];
- let qdc = new QuillDeltaToHtmlConverter(ops);
- qdc.renderCustomWith((op) => {
- if (op.insert.type === 'bolditalic') {
- return '
' + op.insert.value + '';
- }
- return 'unknown';
- });
- let html = qdc.convert();
- assert.equal(html, '
my textunknown
');
- });
-
- it('should render custom insert types as blocks if renderAsBlock is specified', () => {
- let ops = [
- { insert: 'hello ' },
- { insert: { myblot: 'my friend' } },
- { insert: '!' },
- { insert: { myblot: 'how r u?' }, attributes: { renderAsBlock: true } },
- ];
- let qdc = new QuillDeltaToHtmlConverter(ops);
- qdc.renderCustomWith((op) => {
- if (op.insert.type === 'myblot') {
- return op.attributes.renderAsBlock
- ? '
' + op.insert.value + '
'
- : op.insert.value;
- }
- return 'unknown';
- });
- let html = qdc.convert();
- assert.equal(html, '
hello my friend!
how r u?
');
- });
-
- it('should render custom insert types in code blocks with given renderer', () => {
- let ops = [
- { insert: { colonizer: ':' } },
- { insert: '\n', attributes: { 'code-block': true } },
- { insert: 'code1' },
- { insert: '\n', attributes: { 'code-block': true } },
- { insert: { colonizer: ':' } },
- { insert: '\n', attributes: { 'code-block': true } },
- ];
- let renderer = (op: DeltaInsertOp) => {
- if (op.insert.type === 'colonizer') {
- return op.insert.value;
- }
- return '';
- };
- let qdc = new QuillDeltaToHtmlConverter(ops.slice(0, 2));
- qdc.renderCustomWith(renderer);
- assert.equal(qdc.convert(), '
:
');
-
- qdc = new QuillDeltaToHtmlConverter(ops);
- qdc.renderCustomWith(renderer);
- assert.equal(qdc.convert(), '
:\ncode1\n:
');
-
- qdc = new QuillDeltaToHtmlConverter(ops, {
- customTag: (format) => {
- if (format === 'code-block') {
- return 'code';
- }
- },
- });
- qdc.renderCustomWith(renderer);
- assert.equal(qdc.convert(), '
:\ncode1\n:');
- });
-
- it('should render custom insert types in headers with given renderer', () => {
- let ops = [
- { insert: { colonizer: ':' } },
- { insert: '\n', attributes: { header: 1 } },
- { insert: 'hello' },
- { insert: '\n', attributes: { header: 1 } },
- { insert: { colonizer: ':' } },
- { insert: '\n', attributes: { header: 1 } },
- ];
- let renderer = (op: DeltaInsertOp) => {
- if (op.insert.type === 'colonizer') {
- return op.insert.value;
- }
- return '';
- };
- let qdc = new QuillDeltaToHtmlConverter(ops.slice(0, 2));
- qdc.renderCustomWith(renderer);
- assert.equal(qdc.convert(), '
:
');
-
- qdc = new QuillDeltaToHtmlConverter(ops);
- qdc.renderCustomWith(renderer);
- assert.equal(qdc.convert(), '
:
hello
:
');
- });
- });
-
- describe('_getListTag()', function () {
- it('should return proper list tag', function () {
- var op = new DeltaInsertOp('\n', { list: ListType.Ordered });
- var qdc = new QuillDeltaToHtmlConverter(delta1.ops);
- assert.equal(qdc._getListTag(op), 'ol');
-
- var op = new DeltaInsertOp('\n', { list: ListType.Bullet });
- assert.equal(qdc._getListTag(op), 'ul');
-
- var op = new DeltaInsertOp('\n', { list: ListType.Checked });
- assert.equal(qdc._getListTag(op), 'ul');
-
- var op = new DeltaInsertOp('\n', { list: ListType.Unchecked });
- assert.equal(qdc._getListTag(op), 'ul');
-
- var op = new DeltaInsertOp('d');
- assert.equal(qdc._getListTag(op), '');
- });
- });
-
- describe(' prepare data before inline and block renders', function () {
- var ops: any;
- beforeEach(function () {
- ops = [
- { insert: 'Hello' },
- { insert: ' my ', attributes: { italic: true } },
- { insert: '\n', attributes: { italic: true } },
- { insert: ' name is joey' },
- ].map((v: any) => new DeltaInsertOp(v.insert, v.attributes));
- });
-
- describe('renderInlines()', function () {
- it('should render inlines', function () {
- var qdc = new QuillDeltaToHtmlConverter([]);
- var inlines = qdc._renderInlines(ops);
- assert.equal(
- inlines,
- ['
Hello', ' my
name is joey
'].join('')
- );
-
- qdc = new QuillDeltaToHtmlConverter([], { paragraphTag: 'div' });
- var inlines = qdc._renderInlines(ops);
- assert.equal(
- inlines,
- '
Hello my
name is joey
'
- );
-
- qdc = new QuillDeltaToHtmlConverter([], { paragraphTag: '' });
- var inlines = qdc._renderInlines(ops);
- assert.equal(inlines, 'Hello
my name is joey');
- });
-
- it('should render inlines custom tag', function () {
- var qdc = new QuillDeltaToHtmlConverter([], {
- customTag: (format) => {
- if (format === 'italic') {
- return 'i';
- }
- },
- });
- var inlines = qdc._renderInlines(ops);
- assert.equal(
- inlines,
- ['
Hello', ' my
name is joey
'].join('')
- );
-
- qdc = new QuillDeltaToHtmlConverter([], { paragraphTag: 'div' });
- var inlines = qdc._renderInlines(ops);
- assert.equal(
- inlines,
- '
Hello my
name is joey
'
- );
-
- qdc = new QuillDeltaToHtmlConverter([], { paragraphTag: '' });
- var inlines = qdc._renderInlines(ops);
- assert.equal(inlines, 'Hello
my name is joey');
- });
-
- it('should render plain new line string', function () {
- var ops = [new DeltaInsertOp('\n')];
- var qdc = new QuillDeltaToHtmlConverter([]);
- assert.equal(qdc._renderInlines(ops), '
');
- });
-
- it('should render styled new line string', function () {
- var ops = [new DeltaInsertOp('\n', { font: 'arial' })];
- var qdc = new QuillDeltaToHtmlConverter([]);
- assert.equal(qdc._renderInlines(ops), '
');
-
- var qdc = new QuillDeltaToHtmlConverter([], { paragraphTag: '' });
- assert.equal(qdc._renderInlines(ops), '
');
- });
-
- it('should render when first line is new line', function () {
- var ops = [new DeltaInsertOp('\n'), new DeltaInsertOp('aa')];
- var qdc = new QuillDeltaToHtmlConverter([]);
- assert.equal(qdc._renderInlines(ops), '
aa
');
- });
-
- it('should render when last line is new line', function () {
- var ops = [new DeltaInsertOp('aa'), new DeltaInsertOp('\n')];
- var qdc = new QuillDeltaToHtmlConverter([]);
- assert.equal(qdc._renderInlines(ops), '
aa
');
- });
-
- it('should render mixed lines', function () {
- var ops = [new DeltaInsertOp('aa'), new DeltaInsertOp('bb')];
- var nlop = new DeltaInsertOp('\n');
- var stylednlop = new DeltaInsertOp('\n', {
- color: '#333',
- italic: true,
- });
- var qdc = new QuillDeltaToHtmlConverter([]);
- assert.equal(qdc._renderInlines(ops), '
aabb
');
-
- var ops0 = [nlop, ops[0], nlop, ops[1]];
- assert.equal(qdc._renderInlines(ops0), '
aa
bb
');
-
- var ops4 = [ops[0], stylednlop, stylednlop, stylednlop, ops[1]];
- assert.equal(
- qdc._renderInlines(ops4),
- ['
aa
bb
'].join('')
- );
- });
- });
-
- describe('renderBlock()', function () {
- var op = new DeltaInsertOp('\n', { header: 3, indent: 2 });
- var inlineop = new DeltaInsertOp('hi there');
- it('should render container block', function () {
- var qdc = new QuillDeltaToHtmlConverter([]);
- var blockhtml = qdc._renderBlock(op, [inlineop]);
- assert.equal(
- blockhtml,
- ['
', 'hi there
'].join('')
- );
-
- var qdc = new QuillDeltaToHtmlConverter([]);
- var blockhtml = qdc._renderBlock(op, []);
- assert.equal(
- blockhtml,
- ['
', '
'].join('')
- );
- });
-
- it('should correctly render code block', function () {
- let ops = [
- {
- insert: 'line 1',
- },
- {
- attributes: {
- 'code-block': true,
- },
- insert: '\n',
- },
- {
- insert: 'line 2',
- },
- {
- attributes: {
- 'code-block': true,
- },
- insert: '\n',
- },
- {
- insert: 'line 3',
- },
- {
- attributes: {
- 'code-block': 'javascript',
- },
- insert: '\n',
- },
- {
- insert: '
line 4
',
- },
- {
- attributes: {
- 'code-block': true,
- },
- insert: '\n',
- },
- {
- insert: 'line 5',
- },
- {
- attributes: {
- 'code-block': 'ja"va',
- },
- insert: '\n',
- },
- ];
- //console.log(encodeHtml("
line 4
"));
- var qdc = new QuillDeltaToHtmlConverter(ops);
- let html = qdc.convert();
- assert.equal(
- html,
- [
- '
line 1\nline 2
',
- '
line 3
',
- '
',
- encodeHtml('line 4
'),
- '\nline 5' + '',
- ].join('')
- );
-
- qdc = new QuillDeltaToHtmlConverter(ops, {
- multiLineCodeblock: false,
- });
- html = qdc.convert();
- assert.equal(
- '
line 1
line 2
' +
- '
line 3
' +
- '
' +
- encodeHtml('line 4
') +
- '' +
- '
line 5
',
- html
- );
- qdc = new QuillDeltaToHtmlConverter([ops[0], ops[1]]);
- html = qdc.convert();
- assert.equal(html, '
line 1
');
- });
- });
-
- it('should correctly render custom text block', function () {
- let ops = [
- {
- insert: 'line 1',
- },
- {
- attributes: {
- renderAsBlock: true,
- attr1: true,
- },
- insert: '\n',
- },
- {
- insert: 'line 2',
- },
- {
- attributes: {
- renderAsBlock: true,
- attr1: true,
- },
- insert: '\n',
- },
- {
- insert: 'line 3',
- },
- {
- attributes: {
- renderAsBlock: true,
- attr2: true,
- },
- insert: '\n',
- },
- {
- insert: '
line 4
',
- },
- {
- attributes: {
- renderAsBlock: true,
- attr1: true,
- },
- insert: '\n',
- },
- {
- insert: 'line 5',
- },
- {
- attributes: {
- renderAsBlock: true,
- attr1: 'test',
- },
- insert: '\n',
- },
- ];
- //console.log(encodeHtml("
line 4
"));
- var qdc = new QuillDeltaToHtmlConverter(ops, {
- customTag: (format, op) => {
- if (format === 'renderAsBlock' && op.attributes['attr1'] === 'test') {
- return 'test';
- }
- },
- customTagAttributes: (op) => {
- if (op.attributes['attr1'] === 'test') {
- return {
- attr1: op.attributes['attr1'],
- };
- }
- },
- customCssClasses: (op) => {
- if (op.attributes['attr1'] === 'test') {
- return ['ql-test'];
- }
- },
- customCssStyles: (op) => {
- if (op.attributes['attr1'] === 'test') {
- return ['color:red'];
- }
- },
- });
- let html = qdc.convert();
- assert.equal(
- html,
- [
- '
line 1
line 2
',
- '
line 3
',
- '
',
- encodeHtml('
line 4
'),
- '',
- '
line 5',
- ].join('')
- );
-
- qdc = new QuillDeltaToHtmlConverter(ops, {
- multiLineCustomBlock: false,
- });
- html = qdc.convert();
- assert.equal(
- '
line 1
line 2
' +
- '
line 3
' +
- '
' +
- encodeHtml('
line 4
') +
- '' +
- '
line 5
',
- html
- );
- qdc = new QuillDeltaToHtmlConverter([ops[0], ops[1]]);
- html = qdc.convert();
- assert.equal(html, '
line 1
');
- });
-
- describe('before n after renders()', function () {
- var ops = [
- { insert: 'hello', attributes: { bold: true } },
- { insert: '\n', attributes: { bold: true } },
- { insert: 'how r u?' },
- { insert: 'r u fine' },
- { insert: '\n', attributes: { blockquote: true } },
- { insert: { video: 'http://' } },
- { insert: 'list item 1' },
- { insert: '\n', attributes: { list: 'bullet' } },
- { insert: 'list item 1 indented' },
- { insert: '\n', attributes: { list: 'bullet', indent: 1 } },
- ];
- var qdc = new QuillDeltaToHtmlConverter(ops);
-
- it('should call before/after render callbacks ', function (done) {
- let status = { x: 0, y: 8 };
- qdc.beforeRender((groupType, data) => {
- if (groupType === GroupType.InlineGroup) {
- var op = (
data).ops[0];
- assert.ok(op.attributes.bold);
- } else if (groupType === GroupType.Video) {
- var op = (data).op;
- assert.ok(op.insert.type === 'video');
- } else if (groupType === GroupType.Block) {
- var d = data;
- assert.ok(d.op.attributes.blockquote && d.ops.length === 2);
- } else {
- var d = data;
- assert.ok(d.items.length === 1);
- }
- status.x++;
- return '';
- });
- qdc.afterRender((groupType, html) => {
- if (groupType === GroupType.InlineGroup) {
- assert.ok(html.indexOf('hello') > -1);
- } else if (groupType === GroupType.Video) {
- assert.ok(html.indexOf(' -1);
- } else if (groupType === GroupType.Block) {
- assert.ok(html.indexOf(' -1);
- } else {
- assert.ok(html.indexOf('list item 1 -1);
- }
- status.x++;
- return html;
- });
- qdc.convert();
- callWhenXEqualY(status, done);
- });
-
- it(`should call before render with block grouptype for align
- indent and direction`, (done) => {
- let ops = [
- { insert: 'align' },
- { insert: '\n', attributes: { align: 'right' } },
- { insert: 'rtl' },
- { insert: '\n', attributes: { direction: 'rtl' } },
- { insert: 'indent 1' },
- { insert: '\n', attributes: { indent: 1 } },
- ];
- let status = { x: 0, y: 3 };
- let qdc = new QuillDeltaToHtmlConverter(ops);
- qdc.beforeRender((gtype: any) => {
- gtype === 'block' && status.x++;
- return '';
- });
- qdc.convert();
- callWhenXEqualY(status, done);
- });
-
- it('should use my custom html if I return from before call back', function () {
- var c = new QuillDeltaToHtmlConverter([
- { insert: { video: 'http' } },
- { insert: 'aa' },
- ]);
- c.beforeRender(() => {
- return '';
- });
- var v = c.convert();
- assert.ok(v.indexOf(' -1);
- });
-
- it('should register and use callbacks if they are functions', function () {
- var c = new QuillDeltaToHtmlConverter([
- { insert: { video: 'http' } },
- { insert: 'aa' },
- ]);
- var dummy = (): any => '';
-
- c.beforeRender(dummy());
- c.afterRender(dummy());
- v = c.convert();
- assert.ok(v.indexOf('iframe') > -1);
-
- c.beforeRender(dummy);
- var v = c.convert();
- assert.ok(v.indexOf(' -1 && v.indexOf('aa') > -1);
-
- c.afterRender(dummy);
- v = c.convert();
- assert.ok(v === '');
- });
- });
- });
-});
diff --git a/test/_helper.ts b/test/_helper.ts
deleted file mode 100644
index f628605..0000000
--- a/test/_helper.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-function callWhenAlltrue(statuses: boolean[], cb: any) {
- var interval: NodeJS.Timer;
- interval = setInterval(function () {
- var isdone = statuses.reduce((pv: any, v: any) => pv && v, true);
-
- if (isdone) {
- clearInterval(interval);
- cb();
- }
- }, 10);
-}
-
-function callWhenXEqualY({ x, y }: { x: any; y: any }, cb: any) {
- var interval: NodeJS.Timer;
- interval = setInterval(function () {
- var isdone = x === y;
- if (isdone) {
- clearInterval(interval);
- cb();
- }
- }, 10);
-}
-
-export { callWhenAlltrue, callWhenXEqualY };
diff --git a/test/convert-insert-value.test.ts b/test/convert-insert-value.test.ts
new file mode 100644
index 0000000..d7829e9
--- /dev/null
+++ b/test/convert-insert-value.test.ts
@@ -0,0 +1,73 @@
+import { strict as assert } from 'node:assert';
+import { describe, it } from 'vitest';
+import { InsertDataQuill } from './../src/InsertData.js';
+import { convertInsertValue } from '../src/convert-insert-value.js';
+import { DataType } from '../src/value-types.js';
+
+describe('convertInsertValue', function () {
+ const noopSanitize = (v: string) => v;
+ const append1Sanitize = (v: string) => `${v}1`;
+
+ it('should convert text', () => {
+ const got = convertInsertValue('hello', { urlSanitizer: noopSanitize });
+ assert.ok(got instanceof InsertDataQuill);
+ assert.ok(got.type === DataType.Text);
+ assert.equal(got.value, 'hello');
+ });
+
+ it('should convert image', () => {
+ const got = convertInsertValue(
+ { image: 'http://example.com' },
+ { urlSanitizer: noopSanitize },
+ );
+ assert.ok(got instanceof InsertDataQuill);
+ assert.ok(got.type === DataType.Image);
+ assert.equal(got.value, 'http://example.com');
+ });
+
+ it('should convert video', () => {
+ const got = convertInsertValue(
+ { video: 'http://example.com' },
+ { urlSanitizer: noopSanitize },
+ );
+ assert.ok(got instanceof InsertDataQuill);
+ assert.ok(got.type === DataType.Video);
+ assert.equal(got.value, 'http://example.com');
+ });
+
+ it('should convert formula', () => {
+ const got = convertInsertValue(
+ { formula: 'x^2' },
+ { urlSanitizer: noopSanitize },
+ );
+ assert.ok(got instanceof InsertDataQuill);
+ assert.ok(got.type === DataType.Formula);
+ assert.equal(got.value, 'x^2');
+ });
+
+ it('should sanitize an image URL', () => {
+ const got = convertInsertValue(
+ { image: 'http://example.com' },
+ { urlSanitizer: append1Sanitize },
+ );
+ assert.ok(got instanceof InsertDataQuill);
+ assert.ok(got.type === DataType.Image);
+ assert.equal(got.value, 'http://example.com1');
+ });
+
+ it('should sanitize a video URL', () => {
+ const got = convertInsertValue(
+ { video: 'http://example.com' },
+ { urlSanitizer: append1Sanitize },
+ );
+ assert.ok(got instanceof InsertDataQuill);
+ assert.ok(got.type === DataType.Video);
+ assert.equal(got.value, 'http://example.com1');
+ });
+
+ it('should ignore the sanitize options for text', () => {
+ const got = convertInsertValue('hello', { urlSanitizer: append1Sanitize });
+ assert.ok(got instanceof InsertDataQuill);
+ assert.equal(got.value, 'hello');
+ });
+});
diff --git a/test/data/delta1.ts b/test/data/delta1.ts
deleted file mode 100644
index 5c377f4..0000000
--- a/test/data/delta1.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-var delta1 = {
- ops: [
- { insert: 'link', attributes: { link: 'http://a.com/?x=a&b=()' } },
- { insert: 'This ' },
- { attributes: { font: 'monospace' }, insert: 'is' },
- { insert: ' a ' },
- { attributes: { size: 'large' }, insert: 'test' },
- { insert: ' ' },
- { attributes: { italic: true, bold: true }, insert: 'data' },
- { insert: ' ' },
- { attributes: { underline: true, strike: true }, insert: 'that' },
- { insert: ' is ' },
- { attributes: { color: '#e60000' }, insert: 'will' },
- { insert: ' ' },
- { attributes: { background: '#ffebcc' }, insert: 'test' },
- { insert: ' ' },
- { attributes: { script: 'sub' }, insert: 'the' },
- { insert: ' ' },
- { attributes: { script: 'super' }, insert: 'rendering' },
- { insert: ' of ' },
- { attributes: { link: 'http://yahoo' }, insert: 'inline' },
- { insert: ' ' },
- { insert: { formula: 'x=data' } },
- { insert: ' formats.\n' },
- { insert: 'list' },
- { insert: '\n', attributes: { list: 'bullet' } },
- { insert: 'list' },
- { insert: '\n', attributes: { list: 'checked' } },
- { insert: 'some code', attributes: { code: true, bold: true } },
- { attributes: { italic: true, link: '#top', code: true }, insert: 'Top' },
- { insert: '\n' },
- ],
- html: [
- '',
- 'link',
- 'This ',
- 'is',
- ' a ',
- 'test',
- ' ',
- 'data',
- ' ',
- 'that',
- ' is ',
- 'will',
- ' ',
- 'test',
- ' ',
- 'the',
- ' ',
- 'rendering',
- ' of ',
- 'inline',
- ' ',
- 'x=data',
- ' formats.
',
- '',
- '',
- 'some code',
- 'Top
',
- ].join(''),
-};
-
-export { delta1 };
diff --git a/test/data/nonStringSamples.ts b/test/data/nonStringSamples.ts
deleted file mode 100644
index 1380244..0000000
--- a/test/data/nonStringSamples.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-const nonStringSamples: any[] = [
- null,
- undefined,
- false,
- 3,
- [],
- { x: 2 },
- new Date(),
-];
-
-export { nonStringSamples };
diff --git a/test/denormalize.test.ts b/test/denormalize.test.ts
new file mode 100644
index 0000000..2c02e69
--- /dev/null
+++ b/test/denormalize.test.ts
@@ -0,0 +1,71 @@
+import { describe, it } from 'vitest';
+import { strict as assert } from 'node:assert';
+import {
+ denormalizeInsertOp,
+ tokenizeWithNewLines,
+} from '../src/denormalize.js';
+
+describe('denormalizeInsertOp', () => {
+ it('should return a denormalized op as an array of ops', function () {
+ const op1 = { insert: '\n' };
+ const got1 = denormalizeInsertOp({ insert: '\n' });
+ assert.deepEqual(got1, [op1]);
+
+ const op2 = { insert: 'abcd' };
+ const got2 = denormalizeInsertOp(op2);
+ assert.deepEqual(got2, [op2]);
+
+ const op3 = {
+ insert: 'abc\n',
+ attributes: { link: 'cold' },
+ };
+ const got3 = denormalizeInsertOp(op3);
+ assert.equal(got3.length, 2);
+ assert.equal(got3[0].insert, 'abc');
+ assert.equal(got3[0].attributes?.link, 'cold');
+
+ const op4 = {
+ insert: '\n\n',
+ attributes: { bold: true },
+ };
+ const got4 = denormalizeInsertOp(op4);
+ assert.equal(got4.length, 2);
+ assert.equal(got4[1].insert, '\n');
+ });
+});
+
+describe('tokenizeWithNewLines', function () {
+ it('should split and return an array of strings ', () => {
+ let act = '';
+ assert.deepEqual(tokenizeWithNewLines(act), ['']);
+
+ act = '\n';
+ assert.deepEqual(tokenizeWithNewLines(act), ['\n']);
+
+ act = 'abc';
+ assert.deepEqual(tokenizeWithNewLines(act), ['abc']);
+
+ act = 'abc\nd';
+ assert.deepEqual(tokenizeWithNewLines(act), ['abc', '\n', 'd']);
+
+ act = '\n\n';
+ assert.deepEqual(tokenizeWithNewLines(act), ['\n', '\n']);
+
+ act = '\n \n';
+ assert.deepEqual(tokenizeWithNewLines(act), ['\n', ' ', '\n']);
+
+ act = ' \nabc\n';
+ assert.deepEqual(tokenizeWithNewLines(act), [' ', '\n', 'abc', '\n']);
+
+ act = '\n\nabc\n\n6\n';
+ assert.deepEqual(tokenizeWithNewLines(act), [
+ '\n',
+ '\n',
+ 'abc',
+ '\n',
+ '\n',
+ '6',
+ '\n',
+ ]);
+ });
+});
diff --git a/test/funcs-html.test.ts b/test/funcs-html.test.ts
deleted file mode 100644
index a4d9f45..0000000
--- a/test/funcs-html.test.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import {
- makeEndTag,
- makeStartTag,
- encodeHtml,
- decodeHtml,
- encodeLink,
-} from './../src/funcs-html';
-
-describe('html module', function () {
- describe('makeStartTag()', function () {
- it('should make proper html start tags', function () {
- var act = makeStartTag('a');
- assert.equal(act, '');
-
- act = makeStartTag('');
- assert.equal(act, '');
-
- act = makeStartTag('br');
- assert.equal(act, '
');
-
- act = makeStartTag('img', [{ key: 'src', value: 'http://' }]);
- assert.equal(act, '');
-
- var attrs = [
- { key: 'class', value: ' cl1 cl2' },
- { key: 'style', value: 'color:#333' },
- ];
- act = makeStartTag('p', attrs);
- assert.equal(act, '');
-
- assert.equal(makeStartTag('p', [{ key: 'checked' }]), '
');
- });
- });
-
- describe('makeEndTag()', function () {
- it('should make proper html end tags', function () {
- var act = makeEndTag('a');
- assert.equal(act, '
');
-
- act = makeEndTag();
- assert.equal(act, '');
- });
- });
-
- describe('encodeHtml()', function () {
- it('should encode < > & " \' / characters', function () {
- var act = encodeHtml('hello"my&friend&here()', false);
- assert.equal(
- act,
- 'hello"my<lovely'/>&friend&here()'
- );
-
- var act = encodeHtml('hello"my&friend&here()');
- assert.equal(
- act,
- 'hello"my<lovely'/>&friend&here()'
- );
- });
- });
-
- describe('decodeHtml()', function () {
- it('should decode html', function () {
- var act = decodeHtml(
- 'hello"my<lovely'/>&friend&here'
- );
- assert.equal(act, 'hello"my&friend&here');
- });
- });
-
- describe('encodeLink()', function () {
- it('should encode link', function () {
- var act = encodeLink('http://www.yahoo.com/?a=b&c=<>()"\'');
- assert.equal(
- act,
- 'http://www.yahoo.com/?a=b&c=<>()"''
- );
- });
- });
-});
diff --git a/test/grouper/Grouper.test.ts b/test/grouper/Grouper.test.ts
deleted file mode 100644
index fe84a19..0000000
--- a/test/grouper/Grouper.test.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { Grouper } from './../../src/grouper/Grouper';
-import { DeltaInsertOp } from './../../src/DeltaInsertOp';
-import { InsertDataQuill } from './../../src/InsertData';
-import {
- VideoItem,
- InlineGroup,
- BlockGroup,
-} from './../../src/grouper/group-types';
-import { DataType } from './../../src/value-types';
-describe('Grouper', function () {
- describe('#pairOpsWithTheirBlock()', function () {
- var ops = [
- new DeltaInsertOp(new InsertDataQuill(DataType.Video, 'http://')),
- new DeltaInsertOp('hello'),
- new DeltaInsertOp('\n'),
- new DeltaInsertOp('how are you?'),
- new DeltaInsertOp('\n'),
- new DeltaInsertOp('Time is money'),
- new DeltaInsertOp('\n', { blockquote: true }),
- ];
- it('should return ops grouped by group type', function () {
- var act = Grouper.pairOpsWithTheirBlock(ops);
- var exp = [
- new VideoItem(ops[0]),
- new InlineGroup([ops[1], ops[2], ops[3], ops[4]]),
- new BlockGroup(ops[6], [ops[5]]),
- ];
- assert.deepEqual(act, exp);
- });
- });
-
- describe('#groupConsecutiveSameStyleBlocks()', function () {
- it('should compine blocks with same type and style into an []', function () {
- var ops = [
- new DeltaInsertOp('this is code'),
- new DeltaInsertOp('\n', { 'code-block': true }),
- new DeltaInsertOp('this is code TOO!'),
- new DeltaInsertOp('\n', { 'code-block': true }),
- new DeltaInsertOp('\n', { blockquote: true }),
- new DeltaInsertOp('\n', { blockquote: true }),
- new DeltaInsertOp('\n'),
- new DeltaInsertOp('\n', { header: 1 }),
- new DeltaInsertOp('\n', { header: 1 }),
- new DeltaInsertOp('\n', { attr1: true, renderAsBlock: true }),
- new DeltaInsertOp('\n', { attr1: true, renderAsBlock: true }),
- new DeltaInsertOp('\n', { attr1: 'test', renderAsBlock: true }),
- new DeltaInsertOp('\n', { attr2: 'test', renderAsBlock: true }),
- ];
- var pairs = Grouper.pairOpsWithTheirBlock(ops);
- var groups = Grouper.groupConsecutiveSameStyleBlocks(pairs, {
- header: true,
- codeBlocks: true,
- blockquotes: true,
- customBlocks: true,
- });
- assert.deepEqual(groups, [
- [new BlockGroup(ops[1], [ops[0]]), new BlockGroup(ops[1], [ops[2]])],
- [new BlockGroup(ops[4], []), new BlockGroup(ops[4], [])],
- new InlineGroup([ops[6]]),
- [new BlockGroup(ops[7], []), new BlockGroup(ops[8], [])],
- [new BlockGroup(ops[9], []), new BlockGroup(ops[10], [])],
- new BlockGroup(ops[11], []),
- new BlockGroup(ops[12], []),
- ]);
- });
- });
- describe('#reduceConsecutiveSameStyleBlocksToOne()', function () {
- it('should return ops of combined groups moved to 1st group', function () {
- var ops = [
- new DeltaInsertOp('this is code'),
- new DeltaInsertOp('\n', { 'code-block': true }),
- new DeltaInsertOp('this is code TOO!'),
- new DeltaInsertOp('\n', { 'code-block': true }),
- new DeltaInsertOp('\n', { blockquote: true }),
- new DeltaInsertOp('\n', { blockquote: true }),
- new DeltaInsertOp('\n'),
- new DeltaInsertOp('\n', { header: 1 }),
- ];
- var pairs = Grouper.pairOpsWithTheirBlock(ops);
- var groups = Grouper.groupConsecutiveSameStyleBlocks(pairs);
- //console.log(groups);
- var act = Grouper.reduceConsecutiveSameStyleBlocksToOne(groups);
- //console.log(act);
- //console.log(JSON.stringify(act));
- assert.deepEqual(act, [
- new BlockGroup(ops[1], [ops[0], ops[6], ops[2]]),
- new BlockGroup(ops[4], [ops[6], ops[6]]),
- new InlineGroup([ops[6]]),
- new BlockGroup(ops[7], [ops[6]]),
- ]);
- });
- });
-});
diff --git a/test/grouper/ListNester.test.ts b/test/grouper/ListNester.test.ts
deleted file mode 100644
index 896ef8f..0000000
--- a/test/grouper/ListNester.test.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { Grouper } from './../../src/grouper/Grouper';
-import { ListNester } from './../../src/grouper/ListNester';
-import { DeltaInsertOp } from './../../src/DeltaInsertOp';
-import {
- ListGroup,
- ListItem,
- InlineGroup,
- BlockGroup,
-} from './../../src/grouper/group-types';
-import { ListType } from './../../src/value-types';
-
-describe('ListNester', function () {
- describe('nest()', function () {
- it('should not nest different types of lists', function () {
- var ops = [
- new DeltaInsertOp('ordered list 1 item 1'),
- new DeltaInsertOp('\n', { list: ListType.Ordered }),
- new DeltaInsertOp('bullet list 1 item 1'),
- new DeltaInsertOp('\n', { list: ListType.Bullet }),
- new DeltaInsertOp('bullet list 1 item 2'),
- new DeltaInsertOp('\n', { list: ListType.Bullet }),
- new DeltaInsertOp('haha'),
- new DeltaInsertOp('\n'),
- new DeltaInsertOp('\n', { list: ListType.Bullet }),
- new DeltaInsertOp('\n', { list: ListType.Checked }),
- new DeltaInsertOp('\n', { list: ListType.Unchecked }),
- ];
-
- var groups = Grouper.pairOpsWithTheirBlock(ops);
- var nester = new ListNester();
- var act = nester.nest(groups);
- //console.log(JSON.stringify(act, null, 3));
- assert.deepEqual(act, [
- new ListGroup([new ListItem(groups[0])]),
- new ListGroup([
- new ListItem(groups[1]),
- new ListItem(groups[2]),
- ]),
- new InlineGroup([ops[6], ops[7]]),
- new ListGroup([new ListItem(new BlockGroup(ops[8], []))]),
- new ListGroup([
- new ListItem(new BlockGroup(ops[9], [])),
- new ListItem(new BlockGroup(ops[10], [])),
- ]),
- ]);
- });
-
- it('should nest if lists are same and later ones have higher indent', function () {
- var ops = [
- new DeltaInsertOp('item 1'),
- new DeltaInsertOp('\n', { list: ListType.Ordered }),
- new DeltaInsertOp('item 1a'),
- new DeltaInsertOp('\n', { list: ListType.Ordered, indent: 1 }),
- new DeltaInsertOp('item 1a-i'),
- new DeltaInsertOp('\n', { list: ListType.Ordered, indent: 3 }),
- new DeltaInsertOp('item 1b'),
- new DeltaInsertOp('\n', { list: ListType.Ordered, indent: 1 }),
- new DeltaInsertOp('item 2'),
- new DeltaInsertOp('\n', { list: ListType.Ordered }),
- new DeltaInsertOp('haha'),
- new DeltaInsertOp('\n'),
- new DeltaInsertOp('\n', { list: ListType.Ordered, indent: 5 }),
- new DeltaInsertOp('\n', { list: ListType.Bullet, indent: 4 }),
- ];
- var pairs = Grouper.pairOpsWithTheirBlock(ops);
-
- var nester = new ListNester();
- var act = nester.nest(pairs);
- //console.log(JSON.stringify( act, null, 4));
-
- var l1b = new ListItem(pairs[3]);
- var lai = new ListGroup([new ListItem(pairs[2])]);
- var l1a = new ListGroup([new ListItem(pairs[1], lai)]);
-
- var li1 = new ListGroup([new ListItem(pairs[0])]);
- li1.items[0].innerList = new ListGroup(l1a.items.concat(l1b));
- var li2 = new ListGroup([new ListItem(pairs[4])]);
- //console.log(JSON.stringify(act, null, 3));
- assert.deepEqual(act, [
- new ListGroup(li1.items.concat(li2.items)),
-
- new InlineGroup([ops[10], ops[11]]),
- new ListGroup([new ListItem(new BlockGroup(ops[12], []))]),
- new ListGroup([new ListItem(new BlockGroup(ops[13], []))]),
- ]);
- });
- });
-});
diff --git a/test/grouper/TableGrouper.test.ts b/test/grouper/TableGrouper.test.ts
deleted file mode 100644
index 87e194f..0000000
--- a/test/grouper/TableGrouper.test.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { DeltaInsertOp } from '../../src/DeltaInsertOp';
-import { Grouper } from '../../src/grouper/Grouper';
-import { TableGrouper } from '../../src/grouper/TableGrouper';
-import {
- TableGroup,
- TableRow,
- TableCell,
- BlockGroup,
-} from '../../src/grouper/group-types';
-
-describe('TableGrouper', function () {
- describe('empty table', function () {
- var ops = [
- new DeltaInsertOp('\n', { table: 'row-1' }),
- new DeltaInsertOp('\n', { table: 'row-1' }),
- new DeltaInsertOp('\n', { table: 'row-1' }),
- new DeltaInsertOp('\n', { table: 'row-2' }),
- new DeltaInsertOp('\n', { table: 'row-2' }),
- new DeltaInsertOp('\n', { table: 'row-2' }),
- new DeltaInsertOp('\n', { table: 'row-3' }),
- new DeltaInsertOp('\n', { table: 'row-3' }),
- new DeltaInsertOp('\n', { table: 'row-3' }),
- ];
-
- it('should return table with 3 rows and 3 cells', function () {
- var groups = Grouper.pairOpsWithTheirBlock(ops);
- var tableGrouper = new TableGrouper();
- var act = tableGrouper.group(groups);
- var exp = [
- new TableGroup([
- new TableRow([
- new TableCell(groups[0]),
- new TableCell(groups[1]),
- new TableCell(groups[2]),
- ]),
- new TableRow([
- new TableCell(groups[3]),
- new TableCell(groups[4]),
- new TableCell(groups[5]),
- ]),
- new TableRow([
- new TableCell(groups[6]),
- new TableCell(groups[7]),
- new TableCell(groups[8]),
- ]),
- ]),
- ];
-
- assert.deepEqual(act, exp);
- });
- });
-
- describe('single 1 row table', function () {
- var ops = [
- new DeltaInsertOp('cell1'),
- new DeltaInsertOp('\n', { table: 'row-1' }),
- new DeltaInsertOp('cell2'),
- new DeltaInsertOp('\n', { table: 'row-1' }),
- ];
-
- it('should return table with 1 row', function () {
- var groups = Grouper.pairOpsWithTheirBlock(ops);
- var tableGrouper = new TableGrouper();
- var act = tableGrouper.group(groups);
- var exp = [
- new TableGroup([
- new TableRow([
- new TableCell(groups[0]),
- new TableCell(groups[1]),
- ]),
- ]),
- ];
-
- assert.deepEqual(act, exp);
- });
- });
-
- describe('single 1 col table', function () {
- var ops = [
- new DeltaInsertOp('cell1'),
- new DeltaInsertOp('\n', { table: 'row-1' }),
- new DeltaInsertOp('cell2'),
- new DeltaInsertOp('\n', { table: 'row-2' }),
- ];
-
- it('should return table with 1 col', function () {
- var groups = Grouper.pairOpsWithTheirBlock(ops);
- var tableGrouper = new TableGrouper();
- var act = tableGrouper.group(groups);
- var exp = [
- new TableGroup([
- new TableRow([new TableCell(groups[0])]),
- new TableRow([new TableCell(groups[1])]),
- ]),
- ];
-
- assert.deepEqual(act, exp);
- });
- });
-});
diff --git a/test/grouper/group-tables.test.ts b/test/grouper/group-tables.test.ts
new file mode 100644
index 0000000..1094547
--- /dev/null
+++ b/test/grouper/group-tables.test.ts
@@ -0,0 +1,127 @@
+import { describe, it } from 'vitest';
+import { strict as assert } from 'node:assert';
+import { DeltaInsertOp } from '../../src/DeltaInsertOp.js';
+import { groupTables } from '../../src/grouper/group-tables.js';
+import {
+ TableGroup,
+ TableRow,
+ TableCell,
+ BlockGroup,
+} from '../../src/grouper/group-types.js';
+import { pairOpsWithTheirBlock } from '../../src/grouper/grouping.js';
+import { InsertDataQuill } from '../../src/InsertData.js';
+import { DataType } from '../../src/value-types.js';
+
+describe('TableGrouper', function () {
+ describe('empty table', function () {
+ const ops = [
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-1',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-1',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-1',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-2',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-2',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-2',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-3',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-3',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-3',
+ }),
+ ];
+
+ it('should return table with 3 rows and 3 cells', function () {
+ const groups = pairOpsWithTheirBlock(ops);
+ const act = groupTables(groups);
+ const exp = [
+ new TableGroup([
+ new TableRow([
+ new TableCell(groups[0]),
+ new TableCell(groups[1]),
+ new TableCell(groups[2]),
+ ]),
+ new TableRow([
+ new TableCell(groups[3]),
+ new TableCell(groups[4]),
+ new TableCell(groups[5]),
+ ]),
+ new TableRow([
+ new TableCell(groups[6]),
+ new TableCell(groups[7]),
+ new TableCell(groups[8]),
+ ]),
+ ]),
+ ];
+
+ assert.deepEqual(act, exp);
+ });
+ });
+
+ describe('single 1 row table', function () {
+ const ops = [
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'cell1')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-1',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'cell2')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-1',
+ }),
+ ];
+
+ it('should return table with 1 row', function () {
+ const groups = pairOpsWithTheirBlock(ops);
+ const act = groupTables(groups);
+ const exp = [
+ new TableGroup([
+ new TableRow([
+ new TableCell(groups[0]),
+ new TableCell(groups[1]),
+ ]),
+ ]),
+ ];
+
+ assert.deepEqual(act, exp);
+ });
+ });
+
+ describe('single 1 col table', function () {
+ const ops = [
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'cell1')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-1',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'cell2')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ table: 'row-2',
+ }),
+ ];
+
+ it('should return table with 1 col', function () {
+ const groups = pairOpsWithTheirBlock(ops);
+ const act = groupTables(groups);
+ const exp = [
+ new TableGroup([
+ new TableRow([new TableCell(groups[0])]),
+ new TableRow([new TableCell(groups[1])]),
+ ]),
+ ];
+
+ assert.deepEqual(act, exp);
+ });
+ });
+});
diff --git a/test/grouper/grouping.test.ts b/test/grouper/grouping.test.ts
new file mode 100644
index 0000000..6408bba
--- /dev/null
+++ b/test/grouper/grouping.test.ts
@@ -0,0 +1,236 @@
+import { describe, it } from 'vitest';
+import { strict as assert } from 'node:assert';
+import { DeltaInsertOp } from './../../src/DeltaInsertOp.js';
+import { InsertDataCustom, InsertDataQuill } from './../../src/InsertData.js';
+import {
+ BlockGroup,
+ BlotBlock,
+ InlineGroup,
+ VideoItem,
+} from './../../src/grouper/group-types.js';
+import { DataType } from './../../src/value-types.js';
+import {
+ groupConsecutiveSameStyleBlocks,
+ pairOpsWithTheirBlock,
+} from '../../src/grouper/grouping.js';
+
+describe('pairOpsWithTheirBlock', () => {
+ it('should return ops grouped by group type', function () {
+ const ops = [
+ new DeltaInsertOp(new InsertDataQuill(DataType.Video, 'http://')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hey')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'how are you?')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'Time is money')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ blockquote: true,
+ }),
+ ];
+
+ assert.deepEqual(pairOpsWithTheirBlock(ops), [
+ new VideoItem(ops[0]),
+ new InlineGroup([ops[1], ops[2], ops[3]]),
+ new InlineGroup([ops[4], ops[5]]),
+ new BlockGroup(ops[7], [ops[6]]),
+ ]);
+ });
+});
+
+describe('groupConsecutiveSameStyleBlocks', () => {
+ const ops = [
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'this is code')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ 'code-block': true,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'this is code TOO!')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ 'code-block': true,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ blockquote: true,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ blockquote: true,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ header: 1,
+ color: 'red',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ header: 1,
+ color: 'red',
+ }),
+ new DeltaInsertOp(new InsertDataCustom({ custom: 1 }), {
+ renderAsBlock: true,
+ }),
+ new DeltaInsertOp(new InsertDataCustom({ custom: 2 }), {
+ renderAsBlock: true,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ attr1: 'test',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ attr1: 'test',
+ }),
+ new DeltaInsertOp(new InsertDataCustom({ custom: 1 })),
+ new DeltaInsertOp(new InsertDataCustom({ custom: 2 })),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n')),
+ ];
+
+ const pairs = pairOpsWithTheirBlock(ops);
+
+ it('should combine blocks with same type and style into an array when all grouping options are enabled', () => {
+ const groups = groupConsecutiveSameStyleBlocks(pairs, {
+ multiLineBlockquote: true,
+ multiLineCodeBlock: true,
+ multiLineHeader: true,
+ });
+
+ assert.deepEqual(groups, [
+ [new BlockGroup(ops[1], [ops[0]]), new BlockGroup(ops[1], [ops[2]])],
+ [new BlockGroup(ops[4], []), new BlockGroup(ops[4], [])],
+ new InlineGroup([ops[6]]),
+ [new BlockGroup(ops[7], []), new BlockGroup(ops[8], [])],
+ new BlotBlock(ops[9] as DeltaInsertOp),
+ new BlotBlock(ops[10] as DeltaInsertOp),
+ new InlineGroup([ops[11]]),
+ new InlineGroup([ops[12]]),
+ new InlineGroup([ops[13], ops[14], ops[15]]),
+ new InlineGroup([ops[16]]),
+ ]);
+ });
+
+ it('should combine only code blocks with same style into an array when only the multiLineCodeBlock option is enabled', () => {
+ const groups = groupConsecutiveSameStyleBlocks(pairs, {
+ multiLineBlockquote: false,
+ multiLineCodeBlock: true,
+ multiLineHeader: false,
+ });
+
+ assert.deepEqual(groups, [
+ [new BlockGroup(ops[1], [ops[0]]), new BlockGroup(ops[1], [ops[2]])],
+ new BlockGroup(ops[4], []),
+ new BlockGroup(ops[5], []),
+ new InlineGroup([ops[6]]),
+ new BlockGroup(ops[7], []),
+ new BlockGroup(ops[8], []),
+ new BlotBlock(ops[9] as DeltaInsertOp),
+ new BlotBlock(ops[10] as DeltaInsertOp),
+ new InlineGroup([ops[11]]),
+ new InlineGroup([ops[12]]),
+ new InlineGroup([ops[13], ops[14], ops[15]]),
+ new InlineGroup([ops[16]]),
+ ]);
+ });
+
+ it('should combine only header blocks with same style into an array when only the multiLineHeader option is enabled', () => {
+ const groups = groupConsecutiveSameStyleBlocks(pairs, {
+ multiLineBlockquote: false,
+ multiLineCodeBlock: false,
+ multiLineHeader: true,
+ });
+
+ assert.deepEqual(groups, [
+ new BlockGroup(ops[1], [ops[0]]),
+ new BlockGroup(ops[3], [ops[2]]),
+ new BlockGroup(ops[4], []),
+ new BlockGroup(ops[5], []),
+ new InlineGroup([ops[6]]),
+ [new BlockGroup(ops[7], []), new BlockGroup(ops[8], [])],
+ new BlotBlock(ops[9] as DeltaInsertOp),
+ new BlotBlock(ops[10] as DeltaInsertOp),
+ new InlineGroup([ops[11]]),
+ new InlineGroup([ops[12]]),
+ new InlineGroup([ops[13], ops[14], ops[15]]),
+ new InlineGroup([ops[16]]),
+ ]);
+ });
+
+ it('should combine header blocks with the same style when they have text', () => {
+ const ops = [
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello'), {
+ header: 1,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ header: 1,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'bye'), {
+ header: 1,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ header: 1,
+ }),
+ ];
+
+ const pairs = pairOpsWithTheirBlock(ops);
+
+ const groups = groupConsecutiveSameStyleBlocks(pairs, {
+ multiLineBlockquote: false,
+ multiLineCodeBlock: false,
+ multiLineHeader: true,
+ });
+
+ assert.deepEqual(groups, [
+ [
+ new BlockGroup(ops[0], []),
+ new BlockGroup(ops[1], []),
+ new BlockGroup(ops[2], []),
+ new BlockGroup(ops[3], []),
+ ],
+ ]);
+ });
+
+ it('should not combine code blocks with different attributes', () => {
+ const ops = [
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ 'code-block': true,
+ color: 'red',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ 'code-block': true,
+ }),
+ ];
+
+ const pairs = pairOpsWithTheirBlock(ops);
+
+ const groups = groupConsecutiveSameStyleBlocks(pairs, {
+ multiLineBlockquote: true,
+ multiLineCodeBlock: true,
+ multiLineHeader: true,
+ });
+
+ assert.deepEqual(groups, [
+ new BlockGroup(ops[0], []),
+ new BlockGroup(ops[1], []),
+ ]);
+ });
+
+ it('should not combine headers with different attributes', () => {
+ const ops = [
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ header: 1,
+ color: 'red',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ header: 1,
+ }),
+ ];
+
+ const pairs = pairOpsWithTheirBlock(ops);
+
+ const groups = groupConsecutiveSameStyleBlocks(pairs, {
+ multiLineBlockquote: true,
+ multiLineCodeBlock: true,
+ multiLineHeader: true,
+ });
+
+ assert.deepEqual(groups, [
+ new BlockGroup(ops[0], []),
+ new BlockGroup(ops[1], []),
+ ]);
+ });
+});
diff --git a/test/grouper/nest-lists.test.ts b/test/grouper/nest-lists.test.ts
new file mode 100644
index 0000000..09a0da5
--- /dev/null
+++ b/test/grouper/nest-lists.test.ts
@@ -0,0 +1,182 @@
+import { describe, it } from 'vitest';
+import { strict as assert } from 'node:assert';
+import { nestLists } from '../../src/grouper/nest-lists.js';
+import { DeltaInsertOp } from './../../src/DeltaInsertOp.js';
+import {
+ ListGroup,
+ ListItem,
+ InlineGroup,
+ BlockGroup,
+} from './../../src/grouper/group-types.js';
+import { DataType, ListType } from './../../src/value-types.js';
+import { pairOpsWithTheirBlock } from '../../src/grouper/grouping.js';
+import { InsertDataQuill } from '../../src/InsertData.js';
+
+describe('nestLists', function () {
+ it('should not nest different types of lists', function () {
+ const ops = [
+ new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'ordered list 1 item 1'),
+ ),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Ordered,
+ }),
+ new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'bullet list 1 item 1'),
+ ),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ }),
+ new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'bullet list 1 item 2'),
+ ),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'haha')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Checked,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Unchecked,
+ }),
+ ];
+
+ const groups = pairOpsWithTheirBlock(ops);
+ const act = nestLists(groups);
+
+ assert.deepEqual(act, [
+ new ListGroup([new ListItem(groups[0])]),
+ new ListGroup([
+ new ListItem(groups[1]),
+ new ListItem(groups[2]),
+ ]),
+ new InlineGroup([ops[6], ops[7]]),
+ new ListGroup([new ListItem(new BlockGroup(ops[8], []))]),
+ new ListGroup([
+ new ListItem(new BlockGroup(ops[9], [])),
+ new ListItem(new BlockGroup(ops[10], [])),
+ ]),
+ ]);
+ });
+
+ it('should nest a simple list', () => {
+ const ops = [
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'a')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'b')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'c')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ indent: 1,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'd')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ indent: 1,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'e')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'f')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ indent: 1,
+ }),
+ ];
+
+ const groups = pairOpsWithTheirBlock(ops);
+
+ const got = nestLists(groups);
+ const expected = [
+ new ListGroup([
+ new ListItem(groups[0] as BlockGroup),
+ new ListItem(
+ groups[1] as BlockGroup,
+ new ListGroup([
+ new ListItem(groups[2] as BlockGroup),
+ new ListItem(groups[3] as BlockGroup),
+ ]),
+ ),
+ new ListItem(
+ groups[4] as BlockGroup,
+ new ListGroup([new ListItem(groups[5] as BlockGroup)]),
+ ),
+ ]),
+ ];
+
+ assert.deepEqual(got, expected);
+ });
+
+ it('should nest if lists are same and later ones have higher indent', function () {
+ const ops = [
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'item 1')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Ordered,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'item 1a')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Ordered,
+ indent: 1,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'item 1a-i')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Ordered,
+ indent: 3,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'item 1b')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Ordered,
+ indent: 1,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'item 2')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Ordered,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'haha')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Ordered,
+ indent: 5,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ indent: 4,
+ }),
+ ];
+ const pairs = pairOpsWithTheirBlock(ops);
+
+ const act = nestLists(pairs);
+
+ const lai = new ListGroup([new ListItem(pairs[2])]);
+ const l1a = new ListGroup([new ListItem(pairs[1], lai)]);
+ const l1b = new ListItem(pairs[3]);
+
+ const li1 = new ListGroup([
+ new ListItem(
+ pairs[0] as BlockGroup,
+ new ListGroup(l1a.items.concat(l1b)),
+ ),
+ ]);
+ const li2 = new ListGroup([new ListItem(pairs[4])]);
+
+ const expected = [
+ new ListGroup(li1.items.concat(li2.items)),
+ new InlineGroup([ops[10], ops[11]]),
+ new ListGroup([new ListItem(new BlockGroup(ops[12], []))]),
+ new ListGroup([new ListItem(new BlockGroup(ops[13], []))]),
+ ];
+
+ assert.deepEqual(act, expected);
+ });
+});
diff --git a/test/helpers/array.test.ts b/test/helpers/array.test.ts
index 742114d..9933e0f 100644
--- a/test/helpers/array.test.ts
+++ b/test/helpers/array.test.ts
@@ -1,78 +1,26 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import {
- preferSecond,
- flatten,
- groupConsecutiveElementsWhile,
- intersperse,
- find,
-} from './../../src/helpers/array';
-
-describe('Array Helpers Module', function () {
- describe('preferSecond()', function () {
- it('should return second element in an array, otherwise first or null', function () {
- assert.equal(preferSecond([1, 3]), 3);
- assert.equal(preferSecond([5]), 5);
- assert.equal(preferSecond([]), null);
- });
- });
-
- describe('flatten()', function () {
- it('should return deeply flattened array', function () {
- assert.deepEqual(flatten([1, 3, [4, [5, [6, 7]]]]), [1, 3, 4, 5, 6, 7]);
- assert.deepEqual(flatten([]), []);
- });
+import { describe, it } from 'vitest';
+import { strict as assert } from 'node:assert';
+import { groupConsecutiveElementsWhile } from '../../src/helpers/array.js';
+
+describe('groupConsecutiveElementsWhile', () => {
+ it('should move consecutive elements matching predicate into an array (1)', () => {
+ const arr = [1, 'ha', 3, 'ha', 'ha'];
+ const grp = groupConsecutiveElementsWhile(
+ arr,
+ (v, prev) => typeof v === typeof prev,
+ );
+ assert.deepEqual(grp, [1, 'ha', 3, ['ha', 'ha']]);
});
- describe('groupConsecutiveElementsWhile()', function () {
- it('should move consecutive elements matching predicate into an arr', function () {
- var arr = [1, 'ha', 3, 'ha', 'ha'];
- var grp = groupConsecutiveElementsWhile(
- arr,
- (v, v2) => typeof v === typeof v2
- );
- assert.deepEqual(grp, [1, 'ha', 3, ['ha', 'ha']]);
-
- arr = [1, 2, 3, 10, 11, 12];
- var grp = groupConsecutiveElementsWhile(arr, (v, v2) => v - 1 === v2);
- assert.deepEqual(grp, [
- [1, 2, 3],
- [10, 11, 12],
- ]);
- });
- });
-
- describe('intersperse()', function () {
- it('should put specified element between arr elements', function () {
- assert.deepEqual(intersperse([1, 3, 4], 0), [1, 0, 3, 0, 4]);
- assert.deepEqual(intersperse([1], 2), [1]);
- });
- });
-
- describe('find()', function () {
- it('should native find sepecific element', function () {
- assert.equal(
- find([1, 3], (elem) => elem === 3),
- 3
- );
- assert.equal(
- find([], (elem) => elem === 3),
- null
- );
- });
-
- it('should polyfill find sepecific element', function () {
- Object.assign(Array.prototype, { find: undefined });
-
- assert.equal(
- find([1, 3], (elem) => elem === 3),
- 3
- );
- assert.equal(
- find([], (elem) => elem === 3),
- null
- );
- });
+ it('should move consecutive elements matching predicate into an array (2)', () => {
+ const arr2 = [1, 2, 3, 10, 11, 12];
+ const grp2 = groupConsecutiveElementsWhile(
+ arr2,
+ (v, prev) => v - 1 === prev,
+ );
+ assert.deepEqual(grp2, [
+ [1, 2, 3],
+ [10, 11, 12],
+ ]);
});
});
diff --git a/test/helpers/object.test.ts b/test/helpers/object.test.ts
deleted file mode 100644
index 0eedf29..0000000
--- a/test/helpers/object.test.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import * as obj from './../../src/helpers/object';
-
-describe('Object Helpers Module', function () {
- describe('assign()', function () {
- it('should copy properties from sources to target, later overriding earlier', function () {
- var s1 = { level: 1, name: 'Joe' };
- var s2 = { level: 2 };
- var o = obj.assign({}, s1, s2);
- assert.equal(o.level, 2);
- assert.equal(o.name, 'Joe');
- assert.ok(obj.assign(s1, null).level === 1);
- assert.throws(() => obj.assign(null, 2));
- (Object.prototype).a = '';
- assert.ok(obj.assign({ x: 1 }, { x: 2 }).x === 2);
- });
- });
-});
diff --git a/test/helpers/string.test.ts b/test/helpers/string.test.ts
deleted file mode 100644
index 5c198a8..0000000
--- a/test/helpers/string.test.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { tokenizeWithNewLines } from './../../src/helpers/string';
-
-describe('String Extensions Module', function () {
- describe('String#_tokenizeWithNewLines()', function () {
- it('should split and return an array of strings ', () => {
- var act = '';
- assert.deepEqual(tokenizeWithNewLines(act), ['']);
-
- act = '\n';
- assert.deepEqual(tokenizeWithNewLines(act), ['\n']);
-
- act = 'abc';
- assert.deepEqual(tokenizeWithNewLines(act), ['abc']);
-
- act = 'abc\nd';
- assert.deepEqual(tokenizeWithNewLines(act), ['abc', '\n', 'd']);
-
- act = '\n\n';
- assert.deepEqual(tokenizeWithNewLines(act), ['\n', '\n']);
-
- act = '\n \n';
- assert.deepEqual(tokenizeWithNewLines(act), ['\n', ' ', '\n']);
-
- act = ' \nabc\n';
- assert.deepEqual(tokenizeWithNewLines(act), [' ', '\n', 'abc', '\n']);
-
- act = '\n\nabc\n\n6\n';
- assert.deepEqual(tokenizeWithNewLines(act), [
- '\n',
- '\n',
- 'abc',
- '\n',
- '\n',
- '6',
- '\n',
- ]);
- });
- });
-});
diff --git a/test/helpers/url.test.ts b/test/helpers/url.test.ts
deleted file mode 100644
index 38d21e1..0000000
--- a/test/helpers/url.test.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { sanitize } from './../../src/helpers/url';
-
-describe('Url Helpers Module', function () {
- describe('String#_sanitizeUrl() ', function () {
- it('should add unsafe: for invalid protocols', function () {
- var act = "http://www><.yahoo'.com";
- assert.equal(sanitize(act), "http://www><.yahoo'.com");
-
- act = 'https://abc';
- assert.equal(sanitize(act), 'https://abc');
-
- act = 'sftp://abc';
- assert.equal(sanitize(act), 'sftp://abc');
-
- act = ' ftp://abc';
- assert.equal(sanitize(act), 'ftp://abc');
-
- act = ' file://abc';
- assert.equal(sanitize(act), 'file://abc');
-
- act = ' blob://abc';
- assert.equal(sanitize(act), 'blob://abc');
-
- act = 'mailto://abc';
- assert.equal(sanitize(act), 'mailto://abc');
-
- act = 'tel://abc';
- assert.equal(sanitize(act), 'tel://abc');
-
- act = '#abc';
- assert.equal(sanitize(act), '#abc');
-
- act = '/abc';
- assert.equal(sanitize(act), '/abc');
-
- act = ' data:image//abc';
- assert.equal(sanitize(act), 'data:image//abc');
-
- act = "javascript:alert('hi')";
- assert.equal(sanitize(act), "unsafe:javascript:alert('hi')");
- });
- });
-});
diff --git a/test/mentions/MentionSanitizer.test.ts b/test/mentions/MentionSanitizer.test.ts
deleted file mode 100644
index 9764cee..0000000
--- a/test/mentions/MentionSanitizer.test.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import 'mocha';
-import * as assert from 'assert';
-
-import { MentionSanitizer } from './../../src/mentions/MentionSanitizer';
-
-describe('MentionSanitizer', function () {
- describe('#sanitize()', function () {
- it('should return sanitized data', function () {
- let sanitized = MentionSanitizer.sanitize(
- {
- class: 'A-cls-9',
- id: 'An-id_9:.',
- target: '_blank',
- avatar: 'http://www.yahoo.com',
- 'end-point': 'http://abc.com',
- slug: 'my-name',
- },
- {}
- );
- //console.log(sanitized);
- assert.deepEqual(sanitized, {
- class: 'A-cls-9',
- id: 'An-id_9:.',
- target: '_blank',
- avatar: 'http://www.yahoo.com',
- 'end-point': 'http://abc.com',
- slug: 'my-name',
- });
- });
-
- assert.deepEqual(MentionSanitizer.sanitize('a', {}), {});
-
- assert.deepEqual(MentionSanitizer.sanitize({ id: 'sb' }, {}), { id: 'sb' });
- });
-});
diff --git a/test/render-delta.test.tsx b/test/render-delta.test.tsx
new file mode 100644
index 0000000..4e1229d
--- /dev/null
+++ b/test/render-delta.test.tsx
@@ -0,0 +1,1248 @@
+import { strict as assert } from 'node:assert';
+import { describe, it } from 'vitest';
+import { DeltaInsertOp } from './../src/DeltaInsertOp.js';
+import { CustomRenderer, RenderDelta } from './../src/render-delta.js';
+import { DataType, ListType, ScriptType } from './../src/value-types.js';
+import { InsertDataCustom, InsertDataQuill } from '../src/InsertData.js';
+import { InlineGroup } from '../src/grouper/group-types.js';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+const htmlEncodingMap = [
+ ['&', '&'],
+ ['<', '<'],
+ ['>', '>'],
+ ['"', '"'],
+ ["'", '''],
+ ['\\/', '/'],
+] as const;
+
+const encodeHtml = (str: string) =>
+ htmlEncodingMap.reduce(
+ (str, [search, replace]) => str.replaceAll(search, replace),
+ str,
+ );
+
+describe('RenderDelta', () => {
+ describe('constructor', () => {
+ it('should set default options', () => {
+ const rd = new RenderDelta({ ops: [] });
+
+ assert.equal(rd.state.options.orderedListTag, 'ol');
+ assert.equal(rd.state.options.bulletListTag, 'ul');
+ assert.equal(rd.state.options.allowBackgroundClasses, false);
+ // The URL sanitizer should be the identity function by default.
+ assert.equal(
+ rd.state.options.urlSanitizer('http://example.com?q1=x'),
+ 'http://example.com?q1=x',
+ );
+ });
+ });
+
+ describe('render', () => {
+ it('should render a plain new line string as an empty paragraph', () => {
+ const rd = new RenderDelta({
+ ops: [{ insert: '\n' }],
+ });
+ assert.equal(renderToStaticMarkup(rd.render()), '');
+ });
+
+ it('should render when the first op is just a new line', () => {
+ const rd = new RenderDelta({
+ ops: [{ insert: '\n' }, { insert: 'aa\n' }],
+ });
+ assert.equal(renderToStaticMarkup(rd.render()), 'aa
');
+ });
+
+ it('should render when last line is new line', () => {
+ const rd = new RenderDelta({
+ ops: [{ insert: 'aa' }, { insert: '\n' }],
+ });
+ assert.equal(renderToStaticMarkup(rd.render()), 'aa
');
+ });
+
+ it('should render HTML', () => {
+ const ops = [
+ { insert: 'this is text\nthis is code' },
+ {
+ attributes: { 'code-block': 'plain' },
+ insert: '\n',
+ },
+ { insert: 'this is code too!' },
+ {
+ attributes: { 'code-block': 'plain' },
+ insert: '\n',
+ },
+ ];
+ const rd = new RenderDelta({ ops });
+
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'this is text
this is code\nthis is code too!
',
+ );
+ });
+
+ it('should render a paragraph for each new line', () => {
+ const rd = new RenderDelta({
+ ops: [{ insert: '\na\nb\n' }],
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'a
b
',
+ );
+ });
+
+ it('should render lines with mixed styles', () => {
+ const ops = [
+ { insert: 'a', attributes: { color: 'red', italic: true } },
+ { insert: '\n\nb\n' },
+ ];
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'a
b
',
+ );
+ });
+
+ it('should render an inline with a custom tag', () => {
+ const rd = new RenderDelta({
+ ops: [
+ { insert: 'Hello' },
+ { insert: ' my ', attributes: { italic: true } },
+ { insert: '\n' },
+ { insert: ' name is joey' },
+ ],
+ options: {
+ customTag: (format) => {
+ if (format === 'italic') {
+ return 'i';
+ }
+ },
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'Hello my
name is joey
',
+ );
+ });
+
+ it('should render a mention with a custom tag', () => {
+ const ops = [
+ {
+ insert: 'Mention1',
+ attributes: {
+ mentions: true,
+ mention: {
+ class: 'abc',
+ // slug isn't rendered by this library
+ slug: 'a',
+ },
+ },
+ },
+ ];
+ const rd = new RenderDelta({
+ ops,
+ options: {
+ mentionTag: 'span',
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'Mention1
',
+ );
+ });
+
+ it('should render a mention with a link', () => {
+ const rd = new RenderDelta({
+ ops: [
+ {
+ insert: 'Mention2',
+ attributes: {
+ mentions: true,
+ mention: { link: 'https://example.com/abc' },
+ },
+ },
+ ],
+ });
+ const html = renderToStaticMarkup(rd.render());
+ assert.equal(
+ html,
+ 'Mention2
',
+ );
+ });
+
+ it('should return proper HTML for complex ops', function () {
+ const ops = [
+ { insert: 'link', attributes: { link: 'http://a.com/?x=a&b=()' } },
+ { insert: 'This ' },
+ { attributes: { font: 'monospace' }, insert: 'is' },
+ { insert: ' a ' },
+ { attributes: { size: 'large' }, insert: 'test' },
+ { insert: ' ' },
+ { attributes: { italic: true, bold: true }, insert: 'data' },
+ { insert: ' ' },
+ { attributes: { underline: true, strike: true }, insert: 'that' },
+ { insert: ' is ' },
+ { attributes: { color: '#e60000' }, insert: 'will' },
+ { insert: ' ' },
+ { attributes: { background: '#ffebcc' }, insert: 'test' },
+ { insert: ' ' },
+ { attributes: { script: 'sub' }, insert: 'the' },
+ { insert: ' ' },
+ { attributes: { script: 'super' }, insert: 'rendering' },
+ { insert: ' of ' },
+ { attributes: { link: 'http://yahoo' }, insert: 'inline' },
+ { insert: ' ' },
+ { insert: { formula: 'x=data' } },
+ { insert: ' formats.\n' },
+ { insert: 'list' },
+ { insert: '\n', attributes: { list: 'bullet' } },
+ { insert: 'list' },
+ { insert: '\n', attributes: { list: 'checked' } },
+ { insert: 'some code', attributes: { code: true, bold: true } },
+ {
+ attributes: { italic: true, link: '#top', code: true },
+ insert: 'Top',
+ },
+ { insert: '\n' },
+ ];
+ const rd = new RenderDelta({
+ ops,
+ options: {
+ classPrefix: 'noz',
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'linkThis is a test data that is will test the rendering of inline x=data formats.
some codeTop
',
+ );
+ });
+
+ it('should render styling (italic element) at the beginning of a header', () => {
+ const rd = new RenderDelta({
+ ops: [
+ { insert: 'hey', attributes: { italic: true } },
+ { insert: ' yo' },
+ { insert: '\n', attributes: { header: 1 } },
+ ],
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'hey yo
',
+ );
+ });
+
+ it('should render styling (span with a color style) at the beginning of a header', () => {
+ const rd = new RenderDelta({
+ ops: [
+ { attributes: { color: '#e60000' }, insert: 'hey' },
+ { insert: ' yo' },
+ { insert: '\n', attributes: { header: 1 } },
+ ],
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'hey yo
',
+ );
+ });
+
+ it('should set default inline styles when inlineStyles is true', function () {
+ const hugeOps = [
+ { insert: 'huge', attributes: { size: 'huge', attr1: 'red' } },
+ { insert: '\n' },
+ ];
+ const rd = new RenderDelta({
+ ops: hugeOps,
+ options: {
+ inlineStyles: true,
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'huge
',
+ );
+ });
+
+ it('should set default inline styles when inlineStyles is true and custom CSS styles are applied', () => {
+ const hugeOps = [
+ { insert: 'huge', attributes: { size: 'huge', attr1: 'red' } },
+ { insert: '\n' },
+ ];
+ const rd = new RenderDelta({
+ ops: hugeOps,
+ options: {
+ inlineStyles: true,
+ customCssStyles: (op) => {
+ if (op.attributes['attr1'] === 'red') {
+ return {
+ color: 'red',
+ };
+ }
+ },
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'huge
',
+ );
+ });
+
+ it('should allow setting inline styles', function () {
+ const hugeOps = [
+ { insert: 'huge', attributes: { size: 'huge', attr1: 'red' } },
+ { insert: '\n' },
+ ];
+ const rd = new RenderDelta({
+ ops: hugeOps,
+ options: {
+ inlineStyles: {
+ size: () => ({ fontSize: '6em' }),
+ },
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'huge
',
+ );
+ });
+
+ it('should render links with a rel', function () {
+ const ops = [
+ {
+ attributes: {
+ link: '#',
+ },
+ insert: 'hello',
+ },
+ ];
+ const rd = new RenderDelta({
+ ops,
+ options: {
+ linkRel: 'license',
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'hello
',
+ );
+ });
+
+ it('should render links with a target', function () {
+ const ops = [
+ {
+ attributes: {
+ link: '#',
+ rel: 'nofollow noopener',
+ },
+ insert: 'hello',
+ },
+ ];
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'hello
',
+ );
+ });
+
+ it('should render images and image links', function () {
+ const ops = [
+ { insert: { image: 'http://yahoo.com/abc.jpg' } },
+ {
+ insert: { image: 'http://yahoo.com/def.jpg' },
+ attributes: { link: 'http://aha' },
+ },
+ { insert: '\n' },
+ ];
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
',
+ );
+ });
+
+ it('should open and close list tags', function () {
+ const ops = [
+ { insert: 'mr\n' },
+ { insert: 'hello' },
+ { insert: '\n', attributes: { list: 'ordered' } },
+ { insert: 'there' },
+ { insert: '\n', attributes: { list: 'bullet' } },
+ { insert: '\n', attributes: { list: 'ordered' } },
+ ];
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'mr
- hello
',
+ );
+ });
+
+ it('should render separate paragraphs', () => {
+ const rd = new RenderDelta({
+ ops: [{ insert: 'hello\nhow are you?\n\nbye\n' }],
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'hello
how are you?
bye
',
+ );
+ });
+
+ it('should create checked/unchecked lists', function () {
+ const ops4 = [
+ { insert: 'hello' },
+ { insert: '\n', attributes: { list: 'checked' } },
+ { insert: 'there' },
+ { insert: '\n', attributes: { list: 'unchecked' } },
+ { insert: 'man' },
+ { insert: '\n', attributes: { list: 'checked' } },
+ { insert: 'not done' },
+ { insert: '\n', attributes: { indent: 1, list: 'unchecked' } },
+ ];
+ const rd = new RenderDelta({ ops: ops4 });
+ const html = renderToStaticMarkup(rd.render());
+ assert.equal(
+ html,
+ [
+ '',
+ '- hello
',
+ '- there
',
+ '- man',
+ '',
+ '
',
+ '
',
+ ].join(''),
+ );
+ });
+
+ it('should render text while escaping HTML', () => {
+ const ops = [
+ { insert: 'line 1\n', attributes: { code: true } },
+ { insert: 'line 2' },
+ { insert: 'yo\n', attributes: { attr1: true } },
+ { insert: 'line 3\n' },
+ { insert: 'line 4
' },
+ { insert: '\n', attributes: { attr1: true } },
+ { insert: 'line 5' },
+ { insert: '\n', attributes: { attr1: 'test' } },
+ ];
+
+ const rd = new RenderDelta({
+ ops,
+ options: {
+ customTag: (format) => {
+ return format === 'code' ? 'small' : undefined;
+ },
+ customAttributes: (op) => {
+ if (op.attributes['attr1']) {
+ return {
+ 'data-attr1': op.attributes['attr1'],
+ };
+ }
+ return undefined;
+ },
+ customClasses: (op) => {
+ if (op.attributes['attr1'] === 'test') {
+ return ['ql-test'];
+ }
+ return undefined;
+ },
+ customCssStyles: (op) => {
+ if (op.attributes['attr1'] === 'test') {
+ return { color: 'red' };
+ }
+ return undefined;
+ },
+ },
+ });
+
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ `line 1
line 2yo
line 3
${encodeHtml(
+ '
line 4
',
+ )}line 5
`,
+ );
+ });
+
+ it('should render styling within a single-line header', () => {
+ const ops = [
+ { insert: 'Hello ' },
+ { insert: 'there', attributes: { italic: true } },
+ { insert: ' yo' },
+ { insert: '\n', attributes: { header: 1 } },
+ ];
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'Hello there yo
',
+ );
+ });
+
+ it('should convert using custom URL sanitizer', () => {
+ const ops = [
+ { attributes: { link: 'http://yahoo<%=abc%>/ed' }, insert: 'test' },
+ { attributes: { link: 'http://abc<' }, insert: 'hi' },
+ ];
+
+ const rd = new RenderDelta({
+ ops,
+ options: {
+ urlSanitizer: (url) => {
+ if (url.includes('<%')) {
+ return 'REDACTED';
+ }
+ return url;
+ },
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ 'testhi
',
+ );
+ });
+
+ describe('overriding paragraphTag', () => {
+ const ops = [
+ { insert: 'hey' },
+ { insert: '\n', attributes: { align: 'center' } },
+ { insert: '\n', attributes: { direction: 'rtl' } },
+ { insert: '\n', attributes: { indent: 2 } },
+ ];
+
+ it('should render with div tag', () => {
+ const rd = new RenderDelta({
+ ops,
+ options: { paragraphTag: 'div' },
+ });
+ const html = renderToStaticMarkup(rd.render());
+ assert.equal(html.includes('hey'), true);
+ assert.equal(html.includes(' {
+ const ops = [
+ { attributes: { target: '_self', link: 'http://#' }, insert: 'A' },
+ { attributes: { target: '_blank', link: 'http://#' }, insert: 'B' },
+ { attributes: { link: 'http://#' }, insert: 'C' },
+ { insert: '\n' },
+ ];
+
+ it('should render the target attribute when linkTarget is unspecified', () => {
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
ABC
',
+ );
+ });
+
+ it('should render the target attribute when linkTarget is an empty string', () => {
+ const rd = new RenderDelta({ ops, options: { linkTarget: '' } });
+ const html = renderToStaticMarkup(rd.render());
+ assert.equal(
+ html,
+ '
ABC
',
+ );
+ });
+
+ it('should render the target attribute when linkTarget is _top', () => {
+ const rd = new RenderDelta({ ops, options: { linkTarget: '_top' } });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
ABC
',
+ );
+ });
+ });
+
+ describe('tables', () => {
+ it('should render an empty table', () => {
+ const ops = [
+ {
+ insert: '\n\n\n',
+ attributes: { table: 'row-1' },
+ },
+ {
+ insert: '\n\n\n',
+ attributes: { table: 'row-2' },
+ },
+ {
+ insert: '\n\n\n',
+ attributes: { table: 'row-3' },
+ },
+ {
+ insert: '\n',
+ },
+ ];
+
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ [
+ '
',
+ '
',
+ ].join(''),
+ );
+ });
+
+ it('should render singe cell table', () => {
+ const ops = [
+ {
+ insert: 'cell',
+ },
+ {
+ insert: '\n',
+ attributes: {
+ table: 'row-1',
+ },
+ },
+ ];
+
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ [
+ '
',
+ ].join(''),
+ );
+ });
+
+ it('should render filled table', () => {
+ const ops = [
+ {
+ insert: '11',
+ },
+ {
+ attributes: {
+ table: 'row-1',
+ },
+ insert: '\n',
+ },
+ {
+ insert: '12',
+ },
+ {
+ attributes: {
+ table: 'row-1',
+ },
+ insert: '\n',
+ },
+ {
+ insert: '13',
+ },
+ {
+ attributes: {
+ table: 'row-1',
+ },
+ insert: '\n',
+ },
+ {
+ insert: '21',
+ },
+ {
+ attributes: {
+ table: 'row-2',
+ },
+ insert: '\n',
+ },
+ {
+ insert: '22',
+ },
+ {
+ attributes: {
+ table: 'row-2',
+ },
+ insert: '\n',
+ },
+ {
+ insert: '23',
+ },
+ {
+ attributes: {
+ table: 'row-2',
+ },
+ insert: '\n',
+ },
+ {
+ insert: '31',
+ },
+ {
+ attributes: {
+ table: 'row-3',
+ },
+ insert: '\n',
+ },
+ {
+ insert: '32',
+ },
+ {
+ attributes: {
+ table: 'row-3',
+ },
+ insert: '\n',
+ },
+ {
+ insert: '33',
+ },
+ {
+ attributes: {
+ table: 'row-3',
+ },
+ insert: '\n',
+ },
+ {
+ insert: '\n',
+ },
+ ];
+
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ [
+ '
',
+ '| 11 | 12 | 13 |
',
+ '| 21 | 22 | 23 |
',
+ '| 31 | 32 | 33 |
',
+ '
',
+ '
',
+ ].join(''),
+ );
+ });
+ });
+
+ describe('blocks', () => {
+ const ops = [
+ {
+ insert: 'line 1',
+ },
+ {
+ attributes: {
+ 'code-block': true,
+ },
+ insert: '\n',
+ },
+ {
+ insert: 'line 2',
+ },
+ {
+ attributes: {
+ 'code-block': true,
+ },
+ insert: '\n',
+ },
+ {
+ insert: 'line 3',
+ },
+ {
+ attributes: {
+ 'code-block': 'javascript',
+ },
+ insert: '\n',
+ },
+ {
+ insert: '
line 4
',
+ },
+ {
+ attributes: {
+ 'code-block': true,
+ },
+ insert: '\n',
+ },
+ {
+ insert: 'line 5',
+ },
+ {
+ attributes: {
+ // This value should be sanitized out.
+ 'code-block': 'ja"va',
+ },
+ insert: '\n',
+ },
+ ];
+
+ it('should correctly render code block', () => {
+ const rd = new RenderDelta({ ops });
+ const html = renderToStaticMarkup(rd.render());
+ assert.equal(
+ html,
+ `
line 1\nline 2
line 3
${encodeHtml(
+ 'line 4
',
+ )}\nline 5`,
+ );
+ });
+
+ it('should render code block with the multiLineCodeBlock option set to false', () => {
+ const rd = new RenderDelta({
+ ops,
+ options: {
+ multiLineCodeBlock: false,
+ },
+ });
+ const html = renderToStaticMarkup(rd.render());
+ assert.equal(
+ html,
+ `
line 1
line 2
line 3
${encodeHtml(
+ 'line 4
',
+ )}line 5
`,
+ );
+ });
+ });
+
+ describe('custom types', () => {
+ it('should render custom insert types with the given renderer', () => {
+ const ops = [
+ { insert: { boldAndItalic: 'my text' } },
+ { insert: { blah: 1 } },
+ ];
+ const rd = new RenderDelta({
+ ops,
+ customRenderer: (op) => {
+ if ('boldAndItalic' in op.insert.value) {
+ return (
+
+ {op.insert.value.boldAndItalic as string}
+
+ );
+ }
+ return 'unknown';
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
my textunknown
',
+ );
+ });
+
+ describe('the renderAsBlock attribute', () => {
+ it('should render as a top-level element when renderAsBlock is true', () => {
+ const ops = [
+ { insert: 'hello ' },
+ // Notice here there's no renderAsBlock.
+ { insert: { myAbbr: 'my friend', title: 'T1' } },
+ { insert: '!' },
+ // And here it's true.
+ {
+ insert: { myAbbr: 'how r u?', title: 'T2' },
+ attributes: { renderAsBlock: true },
+ },
+ ];
+ const rd = new RenderDelta({
+ ops,
+ customRenderer: ({ insert }) => {
+ if (
+ 'myAbbr' in insert.value &&
+ typeof insert.value.myAbbr === 'string'
+ ) {
+ return (
+
+ {insert.value.myAbbr}
+
+ );
+ }
+ return 'unknown';
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
hello my friend!
how r u?',
+ );
+ });
+
+ it('should render wrapped in a p tag when renderAsBlock is false', () => {
+ const ops = [
+ { insert: 'hello ' },
+ // Notice here there's no renderAsBlock.
+ { insert: { myAbbr: 'my friend', title: 'T1' } },
+ { insert: '!' },
+ // And here it's false.
+ {
+ insert: { myAbbr: 'how r u?', title: 'T2' },
+ attributes: { renderAsBlock: false },
+ },
+ ];
+ const rd = new RenderDelta({
+ ops,
+ customRenderer: ({ insert }) => {
+ if (
+ 'myAbbr' in insert.value &&
+ typeof insert.value.myAbbr === 'string'
+ ) {
+ return (
+
+ {insert.value.myAbbr}
+
+ );
+ }
+ return 'unknown';
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
hello my friend!how r u?
',
+ );
+ });
+ });
+
+ describe('inside code blocks', () => {
+ const ops = [
+ { insert: { colonizer: ':' } },
+ { insert: '\n', attributes: { 'code-block': true } },
+ { insert: 'code1' },
+ { insert: '\n', attributes: { 'code-block': true } },
+ { insert: { colonizer: ':' } },
+ { insert: '\n', attributes: { 'code-block': true } },
+ ];
+
+ const customRenderer: CustomRenderer = (op) => {
+ if ('colonizer' in op.insert.value) {
+ return op.insert.value.colonizer as string;
+ }
+ return null;
+ };
+
+ it('should render a simple custom insert type', () => {
+ const rd = new RenderDelta({ ops: ops.slice(0, 2), customRenderer });
+ assert.equal(renderToStaticMarkup(rd.render()), '
:
');
+ });
+
+ it('should render a custom insert type among other inserts', () => {
+ const rd = new RenderDelta({ ops, customRenderer });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
:\ncode1\n:
',
+ );
+ });
+
+ it('should render custom insert types along with inserts with a custom tag', () => {
+ const rd = new RenderDelta({
+ ops,
+ options: {
+ customTag: (format) => {
+ if (format === 'code-block') {
+ return 'code';
+ }
+ },
+ },
+ customRenderer,
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
:\ncode1\n:',
+ );
+ });
+ });
+
+ describe('inside headers', () => {
+ const customRenderer: CustomRenderer = (op) => {
+ if ('colonizer' in op.insert.value) {
+ return op.insert.value.colonizer as string;
+ }
+ return '';
+ };
+
+ it('should render a simple custom insert type', () => {
+ const rd = new RenderDelta({
+ ops: [
+ { insert: { colonizer: ':' } },
+ { insert: '\n', attributes: { header: 1 } },
+ ],
+ customRenderer,
+ });
+ assert.equal(renderToStaticMarkup(rd.render()), '
:
');
+ });
+
+ it('should render a custom insert type among other inserts', () => {
+ const rd = new RenderDelta({
+ ops: [
+ { insert: { colonizer: ':' } },
+ { insert: '\n', attributes: { header: 1 } },
+ { insert: 'hello' },
+ { insert: '\n', attributes: { header: 1 } },
+ { insert: { colonizer: ';' } },
+ { insert: '\n', attributes: { header: 1 } },
+ ],
+ customRenderer,
+ });
+ assert.equal(
+ // Note that there's one outer-level h1 tag because of combining multi-line headers.
+ renderToStaticMarkup(rd.render()),
+ '
:\nhello\n;
',
+ );
+ });
+
+ it('should render a custom insert type among other header inserts when not multiline', () => {
+ const rd = new RenderDelta({
+ ops: [
+ { insert: { colonizer: ':' } },
+ { insert: '\n', attributes: { header: 1 } },
+ { insert: 'hello' },
+ { insert: '\n', attributes: { header: 1 } },
+ { insert: { colonizer: ';' } },
+ { insert: '\n', attributes: { header: 1 } },
+ ],
+ customRenderer,
+ options: {
+ multiLineHeader: false,
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
:
hello
;
',
+ );
+ });
+ });
+ });
+
+ describe('multi-line headers', () => {
+ it('should render multi-line headers of the same style', () => {
+ const rd = new RenderDelta({
+ ops: [
+ { insert: 'hello\n', attributes: { header: 1 } },
+ { insert: 'bye\n', attributes: { header: 1 } },
+ ],
+ });
+ assert.equal(renderToStaticMarkup(rd.render()), '
hello\nbye
');
+ });
+
+ it('should render styling within a multi-line header', () => {
+ const ops = [
+ { insert: 'Hello ' },
+ { insert: 'there', attributes: { italic: true } },
+ { insert: '\n', attributes: { header: 1 } },
+ { insert: 'yo' },
+ { insert: '\n', attributes: { header: 1 } },
+ ];
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
Hello there\nyo
',
+ );
+ });
+
+ it('should render complex nested styling within a multi-line header', () => {
+ const ops = [
+ {
+ insert: 'H',
+ },
+ {
+ attributes: {
+ underline: true,
+ bold: true,
+ },
+ insert: 'e',
+ },
+ {
+ attributes: {
+ underline: true,
+ },
+ insert: 'llo',
+ },
+ {
+ insert: ' ',
+ },
+ {
+ attributes: {
+ italic: true,
+ },
+ insert: 'ther',
+ },
+ {
+ attributes: {
+ color: '#e60000',
+ italic: true,
+ },
+ insert: 'e',
+ },
+ {
+ attributes: {
+ header: 1,
+ },
+ insert: '\n',
+ },
+ {
+ attributes: {
+ color: '#e60000',
+ },
+ insert: 'y',
+ },
+ {
+ attributes: {
+ underline: true,
+ },
+ insert: 'o',
+ },
+ {
+ attributes: {
+ header: 1,
+ },
+ insert: '\n',
+ },
+ ];
+ const rd = new RenderDelta({ ops });
+ assert.equal(
+ renderToStaticMarkup(rd.render()),
+ '
Hello there\nyo
',
+ );
+ });
+ });
+ });
+
+ describe('getGroupedOps', () => {
+ it('should transform raw Delta ops to an array of DeltaInsertOp', function () {
+ const ops = [
+ { insert: 'This ' },
+ { attributes: { font: 'monospace' }, insert: 'is' },
+ { insert: ' a ' },
+ { attributes: { size: 'large' }, insert: 'test' },
+ { insert: ' ' },
+ { attributes: { italic: true, bold: true }, insert: 'data' },
+ { insert: ' ' },
+ { attributes: { underline: true, strike: true }, insert: 'that' },
+ { insert: ' is ' },
+ { attributes: { color: '#e60000' }, insert: 'will' },
+ { insert: ' ' },
+ { attributes: { background: '#ffebcc' }, insert: 'test' },
+ { insert: ' ' },
+ { attributes: { script: ScriptType.Sub }, insert: 'the' },
+ { insert: ' ' },
+ { attributes: { script: ScriptType.Super }, insert: 'rendering' },
+ { insert: ' of ' },
+ { attributes: { link: 'yahoo' }, insert: 'inline' },
+ { insert: ' ' },
+ { insert: { formula: 'x=data' } },
+ { insert: ' formats.\n' },
+ ];
+
+ const rd = new RenderDelta({
+ ops,
+ options: {
+ urlSanitizer: (url) =>
+ url.includes('yahoo') ? `unsafe:${url}` : url,
+ },
+ });
+
+ const groupedOps = rd.getGroupedOps();
+ assert.deepEqual(groupedOps, [
+ new InlineGroup([
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'This ')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'is'), {
+ font: 'monospace',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, ' a ')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'test'), {
+ size: 'large',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, ' ')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'data'), {
+ italic: true,
+ bold: true,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, ' ')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'that'), {
+ underline: true,
+ strike: true,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, ' is ')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'will'), {
+ color: '#e60000',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, ' ')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'test'), {
+ background: '#ffebcc',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, ' ')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'the'), {
+ script: ScriptType.Sub,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, ' ')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'rendering'), {
+ script: ScriptType.Super,
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, ' of ')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'inline'), {
+ link: 'unsafe:yahoo',
+ }),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, ' ')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Formula, 'x=data')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, ' formats.')),
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n')),
+ ]),
+ ]);
+ });
+
+ it('should transform raw custom ops', () => {
+ const rd = new RenderDelta({
+ ops: [{ insert: { cake: 'chocolate' } }],
+ });
+ assert.deepEqual(rd.getGroupedOps(), [
+ new InlineGroup([
+ new DeltaInsertOp(new InsertDataCustom({ cake: 'chocolate' })),
+ ]),
+ ]);
+ });
+
+ it('should exclude invalid ops', () => {
+ [null, undefined, 3, {}].forEach((op: unknown) => {
+ const rd = new RenderDelta({ ops: [op] });
+ assert.deepEqual(rd.getGroupedOps(), []);
+ });
+ });
+ });
+
+ describe('getListTag', () => {
+ const rd = new RenderDelta({ ops: [] });
+
+ it('should return the expected list tag for an ordered list', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Ordered,
+ });
+ assert.equal(rd.getListTag(op), 'ol');
+ });
+
+ it('should return the expected list tag for a bullet list', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Bullet,
+ });
+ assert.equal(rd.getListTag(op), 'ul');
+ });
+
+ it('should return the expected list tag for a checked list', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Checked,
+ });
+ assert.equal(rd.getListTag(op), 'ul');
+ });
+
+ it('should return the expected list tag for an unchecked list', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, '\n'), {
+ list: ListType.Unchecked,
+ });
+ assert.equal(rd.getListTag(op), 'ul');
+ });
+ });
+});
diff --git a/test/render-op.test.ts b/test/render-op.test.ts
new file mode 100644
index 0000000..a350ac5
--- /dev/null
+++ b/test/render-op.test.ts
@@ -0,0 +1,766 @@
+import { strict as assert } from 'node:assert';
+import { describe, it } from 'vitest';
+import { OpToNodeConverterOptions, RenderOp } from '../src/render-op.js';
+import { DeltaInsertOp } from '../src/DeltaInsertOp.js';
+import { InsertDataQuill } from '../src/InsertData.js';
+import {
+ AlignType,
+ DataType,
+ DirectionType,
+ ListType,
+ ScriptType,
+} from '../src/value-types.js';
+import type { CSSProperties } from 'react';
+import type { OpAttributes } from '../src/OpAttributeSanitizer.js';
+import { renderToStaticMarkup } from 'react-dom/server';
+
+describe('RenderOp', () => {
+ describe('constructor', () => {
+ it('should set default options', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello')),
+ {
+ customClasses: () => 'my-class',
+ },
+ );
+ assert.deepEqual(ro.getCustomClasses(), ['my-class']);
+ });
+ });
+
+ describe('getCssStyles', () => {
+ const attrs: OpAttributes = {
+ indent: 1,
+ align: AlignType.Center,
+ direction: DirectionType.Rtl,
+ font: 'roman',
+ size: 'small',
+ background: 'red',
+ };
+
+ const expectedStyles: CSSProperties = {
+ backgroundColor: 'red',
+ paddingRight: '3em',
+ textAlign: 'center',
+ direction: 'rtl',
+ fontFamily: 'roman',
+ fontSize: '0.75em',
+ };
+
+ it('should return an empty object when there are no styles', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello')),
+ );
+ assert.deepEqual(ro.getCssStyles(), {});
+ });
+
+ it('should return custom styles for a custom attribute', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'f'), {
+ attr1: 'red',
+ });
+ const ro = new RenderOp(op, {
+ customCssStyles: (op) => {
+ const value = op.attributes['attr1'];
+ if (value) {
+ return {
+ color: value as string,
+ };
+ }
+ return undefined;
+ },
+ });
+ assert.deepEqual(ro.getCssStyles(), {
+ color: 'red',
+ });
+ });
+
+ it('should not set the CSS backgroundColor property with the allowBackgroundClasses option', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'f'), {
+ background: 'red',
+ color: 'blue',
+ });
+ const ro = new RenderOp(op, { allowBackgroundClasses: true });
+ assert.deepEqual(ro.getCssStyles(), {
+ color: 'blue',
+ });
+ });
+
+ it('should return custom styles for a custom attribute and the background attribute', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'f'), {
+ attr1: 'green',
+ background: 'red',
+ });
+ const ro = new RenderOp(op, {
+ customCssStyles: (op) => {
+ const value = op.attributes['attr1'];
+ if (value) {
+ return {
+ color: value as string,
+ };
+ }
+ return undefined;
+ },
+ });
+ assert.deepEqual(ro.getCssStyles(), {
+ backgroundColor: 'red',
+ color: 'green',
+ });
+ });
+
+ it('should return inline styles for an inline insert', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello'), attrs),
+ {
+ inlineStyles: {},
+ },
+ );
+ assert.deepEqual(ro.getCssStyles(), expectedStyles);
+ });
+
+ it('should return inline styles for an image', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Image, ''),
+ attrs,
+ );
+ const ro = new RenderOp(op, { inlineStyles: {} });
+ assert.deepEqual(ro.getCssStyles(), expectedStyles);
+ });
+
+ it('should return inline styles for a video', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Video, ''),
+ attrs,
+ );
+ const ro = new RenderOp(op, { inlineStyles: {} });
+ assert.deepEqual(ro.getCssStyles(), {
+ ...expectedStyles,
+ border: 'none',
+ });
+ });
+
+ it('should return inline styles for a formula', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Formula, ''),
+ attrs,
+ );
+ const ro = new RenderOp(op, { inlineStyles: {} });
+ assert.deepEqual(ro.getCssStyles(), expectedStyles);
+ });
+
+ it('should return the styling for RTL', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'f'), {
+ direction: DirectionType.Rtl,
+ });
+ const ro = new RenderOp(op, { inlineStyles: {} });
+ assert.deepEqual(ro.getCssStyles(), {
+ direction: 'rtl',
+ textAlign: 'inherit',
+ });
+ });
+
+ it('should return padding styling', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Image, ''), {
+ indent: 2,
+ });
+ const ro = new RenderOp(op, { inlineStyles: {} });
+ assert.deepEqual(ro.getCssStyles(), {
+ paddingLeft: '6em',
+ });
+ });
+
+ it('should ignore an invalid direction', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Image, ''), {
+ // @ts-expect-error -- Notice this is 'ltr' instead of DirectionType.Rtl.
+ direction: 'ltr',
+ });
+ const ro = new RenderOp(op);
+ assert.deepEqual(ro.getCssStyles(), {});
+ });
+
+ it('should allow setting inline styles', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'f'), {
+ size: 'huge',
+ });
+ const ro = new RenderOp(op, {
+ inlineStyles: {
+ size: (value) =>
+ value === 'huge'
+ ? {
+ fontSize: '6em',
+ }
+ : undefined,
+ },
+ });
+ assert.deepEqual(ro.getCssStyles(), { fontSize: '6em' });
+ });
+
+ it('should render default font inline styles', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'f'), {
+ font: 'monospace',
+ });
+ const ro = new RenderOp(op, { inlineStyles: {} });
+ assert.deepEqual(ro.getCssStyles(), {
+ fontFamily: 'Monaco, Courier New, monospace',
+ });
+ });
+
+ it('should return nothing for an inline style with no mapped entry', function () {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'f'), {
+ size: 'biggest',
+ }),
+ {
+ inlineStyles: {
+ somethingElse: () => ({
+ fontSize: '0.75em',
+ }),
+ },
+ },
+ );
+ assert.deepEqual(ro.getCssStyles(), {});
+ });
+
+ it('should return nothing for an inline style where the custom styling function returns undefined', function () {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'f'), {
+ size: 'biggest',
+ }),
+ {
+ inlineStyles: {
+ size: () => undefined,
+ },
+ },
+ );
+ assert.deepEqual(ro.getCssStyles(), {});
+ });
+ });
+
+ describe('getClasses', () => {
+ const options: Partial
= {
+ customClasses: (op) => {
+ if (op.attributes.size === 'small') {
+ return ['small-size-a'];
+ }
+ },
+ };
+
+ const attrs: OpAttributes = {
+ indent: 1,
+ align: AlignType.Center,
+ direction: DirectionType.Rtl,
+ font: 'roman',
+ size: 'small',
+ background: 'red',
+ };
+
+ const expectedClasses = [
+ 'small-size-a',
+ 'ql-align-center',
+ 'ql-direction-rtl',
+ 'ql-font-roman',
+ 'ql-indent-1',
+ 'ql-size-small',
+ ];
+
+ it('should return an empty array when there are no classes', () => {
+ // Notice we are not passing in attrs.
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello')),
+ options,
+ );
+ assert.deepEqual(ro.getClasses(), []);
+ });
+
+ it('should not prefix a class with an empty custom prefix', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello'), attrs),
+ { ...options, classPrefix: '' },
+ );
+ assert.deepEqual(ro.getClasses(), [
+ 'small-size-a',
+ 'align-center',
+ 'direction-rtl',
+ 'font-roman',
+ 'indent-1',
+ 'size-small',
+ ]);
+ });
+
+ it('should prefix each class with a non-empty custom prefix', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'aa'), attrs),
+ { ...options, classPrefix: 'xx' },
+ );
+ assert.deepEqual(ro.getClasses(), [
+ 'small-size-a',
+ 'xx-align-center',
+ 'xx-direction-rtl',
+ 'xx-font-roman',
+ 'xx-indent-1',
+ 'xx-size-small',
+ ]);
+ });
+
+ it('should by default return prefixed classes for an inline insert', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello'), attrs),
+ options,
+ );
+ assert.deepEqual(ro.getClasses(), expectedClasses);
+ });
+
+ it('should return prefixed classes for an image', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Image, ''),
+ attrs,
+ );
+ const ro = new RenderOp(op, options);
+ assert.deepEqual(ro.getClasses(), expectedClasses.concat('ql-image'));
+ });
+
+ it('should return prefixed classes for a video', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Video, ''),
+ attrs,
+ );
+ const ro = new RenderOp(op, options);
+ assert.deepEqual(ro.getClasses(), expectedClasses.concat('ql-video'));
+ });
+
+ it('should return prefixed classes for a formula', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Formula, ''),
+ attrs,
+ );
+ const ro = new RenderOp(op, options);
+ assert.deepEqual(ro.getClasses(), expectedClasses.concat('ql-formula'));
+ });
+
+ it('should add a background class with the allowBackgroundClasses option', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'f'),
+ attrs,
+ );
+ const ro = new RenderOp(op, {
+ ...options,
+ allowBackgroundClasses: true,
+ });
+ assert.deepEqual(ro.getClasses(), [
+ 'small-size-a',
+ 'ql-align-center',
+ 'ql-background-red',
+ 'ql-direction-rtl',
+ 'ql-font-roman',
+ 'ql-indent-1',
+ 'ql-size-small',
+ ]);
+ });
+
+ it('should not return any classes with inlineStyles being specified', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'f'),
+ attrs,
+ );
+ const ro = new RenderOp(op, { inlineStyles: {} });
+ assert.deepEqual(ro.getClasses(), []);
+ });
+ });
+
+ describe('getTagAttributes', () => {
+ it('should return an empty object when there are no attributes', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello')),
+ );
+ assert.deepEqual(ro.getTagAttributes(), {});
+ });
+
+ it('should return an object with the proper attributes for an inline code element', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, ''), {
+ code: true,
+ color: 'red',
+ });
+ const ro = new RenderOp(op, { inlineStyles: true });
+ assert.deepEqual(ro.getTagAttributes(), {
+ style: {
+ color: 'red',
+ },
+ });
+ });
+
+ it('should return an object with the proper attributes for an image', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Image, 'https://example.com/image.png'),
+ {
+ width: '200',
+ },
+ );
+ const ro = new RenderOp(op);
+ assert.deepEqual(ro.getTagAttributes(), {
+ className: 'ql-image',
+ src: 'https://example.com/image.png',
+ width: '200',
+ });
+ });
+
+ it('should return an object with the proper attributes for a formula', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Formula, ''), {
+ color: 'red',
+ });
+ const ro = new RenderOp(op);
+ assert.deepEqual(ro.getTagAttributes(), {
+ className: 'ql-formula',
+ style: {
+ color: 'red',
+ },
+ });
+ });
+
+ it('should return an object with the proper attributes for a video', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Video, 'https://example.com/video.mp4'),
+ {
+ color: 'red',
+ },
+ );
+ const ro = new RenderOp(op);
+ assert.deepEqual(ro.getTagAttributes(), {
+ className: 'ql-video',
+ allowFullScreen: true,
+ src: 'https://example.com/video.mp4',
+ style: {
+ border: 'none',
+ color: 'red',
+ },
+ });
+ });
+
+ it('should return an object with the proper attributes for a link', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'link'), {
+ color: 'red',
+ link: 'https://example.com/hello',
+ });
+ const ro = new RenderOp(op);
+ assert.deepEqual(ro.getTagAttributes(), {
+ href: 'https://example.com/hello',
+ style: {
+ color: 'red',
+ },
+ });
+ });
+
+ it('should return an object with the proper attributes for a link with a linkRel option', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'link'), {
+ color: 'red',
+ link: 'https://example.com/hello',
+ });
+ const ro = new RenderOp(op, { linkRel: 'nofollow' });
+ assert.deepEqual(ro.getTagAttributes(), {
+ href: 'https://example.com/hello',
+ rel: 'nofollow',
+ style: {
+ color: 'red',
+ },
+ });
+ });
+
+ it('should return an object with the data-language attribute for a code block', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, ''), {
+ 'code-block': 'javascript',
+ });
+ const ro = new RenderOp(op);
+ assert.deepEqual(ro.getTagAttributes(), {
+ 'data-language': 'javascript',
+ });
+ });
+ });
+
+ describe('renderOp', () => {
+ it('should return children directly in a simple case with no formats', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello'));
+ const ro = new RenderOp(op);
+ assert.equal(renderToStaticMarkup(ro.renderOp('something')), 'something');
+ });
+
+ it('should wrap its argument with attributes', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'hello'),
+ { bold: true, color: 'red' },
+ );
+ const ro = new RenderOp(op, {
+ inlineStyles: {
+ color: (value) =>
+ typeof value === 'string'
+ ? {
+ color: value,
+ }
+ : undefined,
+ },
+ customAttributes: () => ({
+ 'data-custom': '',
+ }),
+ });
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp('something')),
+ 'something',
+ );
+ });
+
+ it('should ignore children for an image', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Image, 'https://example.com/hello.png'),
+ );
+ const ro = new RenderOp(op, {
+ customClasses: () => 'my-img',
+ });
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp('something')),
+ '
',
+ );
+ });
+
+ it('should ignore children for an image link', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Image, 'https://example.com/hello.png'),
+ {
+ link: 'https://example.com/hello',
+ },
+ );
+ const ro = new RenderOp(op, {
+ customClasses: () => 'my-img',
+ });
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp('something')),
+ '',
+ );
+ });
+
+ it('should render the span tag for a formula', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Formula, '')),
+ );
+ assert.deepEqual(
+ renderToStaticMarkup(ro.renderOp('hello')),
+ 'hello',
+ );
+ });
+
+ it('should render the blockquote tag for a blockquote', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello'), {
+ blockquote: true,
+ }),
+ );
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp('hello')),
+ 'hello
',
+ );
+ });
+
+ it('should render the pre tag for a code block', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello'), {
+ 'code-block': true,
+ }),
+ );
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp('hello')),
+ 'hello
',
+ );
+ });
+
+ it('should render the li tag for a list item', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello'), {
+ list: ListType.Bullet,
+ }),
+ );
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp('hello')),
+ '- hello
',
+ );
+ });
+
+ it('should render a custom tag', () => {
+ const cases = [
+ ['code-block', 'div'],
+ ['bold', 'h2'],
+ ['list', 'li'],
+ ['header', 'h2'],
+ ] as const;
+ cases.forEach(([attr, expected]) => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, ''), {
+ [attr]: true,
+ header: 2,
+ });
+ const ro = new RenderOp(op, {
+ customTag: (format) => {
+ if (format === 'code-block') {
+ return 'div';
+ }
+ if (format === 'bold') {
+ return 'b';
+ }
+ },
+ });
+ assert.deepEqual(
+ renderToStaticMarkup(ro.renderOp('hello')),
+ `<${expected}>hello`,
+ );
+ });
+ });
+
+ it('should render both custom inline tags and built-in inline tags nested', () => {
+ const attributes: OpAttributes = {
+ bold: true,
+ italic: true,
+ mentions: true,
+ strike: true,
+ underline: true,
+ };
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Text, 'hello'),
+ attributes,
+ );
+ const ro = new RenderOp(op, {
+ customTag: (format) => {
+ if (format === 'mentions') {
+ // Note the default is 'a'.
+ return 'span';
+ }
+ if (format === 'strike') {
+ return 'cite';
+ }
+ return undefined;
+ },
+ });
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp('hello')),
+ 'hello',
+ );
+ });
+
+ it('should return the proper tag for a block insert with custom tags and attributes', () => {
+ const cases = [
+ ['blockquote', 'blockquote'],
+ ['code-block', 'pre'],
+ ['list', 'li'],
+ ] as const;
+
+ cases.forEach(([attribute, expected]) => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, ''), {
+ [attribute]: true,
+ });
+ const ro = new RenderOp(op);
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp('hello')),
+ `<${expected}>hello`,
+ );
+ });
+ });
+
+ it('should return the insert plainly when it has no attributes', () => {
+ const op = new DeltaInsertOp(new InsertDataQuill(DataType.Text, ''));
+ const ro = new RenderOp(op);
+ assert.equal(renderToStaticMarkup(ro.renderOp('hello')), 'hello');
+ });
+
+ it('should return proper HTML content for a complex op', () => {
+ const attributes: OpAttributes = {
+ link: 'https://example.com/hello',
+ bold: true,
+ italic: true,
+ underline: true,
+ strike: true,
+ script: ScriptType.Super,
+ font: 'verdana',
+ size: 'small',
+ color: 'red',
+ background: '#fff',
+ };
+
+ const ro = new RenderOp(
+ new DeltaInsertOp(
+ // Notice this value should be ignored.
+ new InsertDataQuill(DataType.Text, 'aaa'),
+ attributes,
+ ),
+ );
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp()),
+ `hello`,
+ );
+ });
+
+ it('should return proper HTML content for a paragraph', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'aa'), {
+ indent: 1,
+ }),
+ );
+ assert.equal(
+ // Notice that what we pass in takes precedence.
+ renderToStaticMarkup(ro.renderOp('something')),
+ 'something
',
+ );
+ });
+
+ it('should return proper HTML content for a blockquote', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Text, 'hello'), {
+ blockquote: true,
+ }),
+ );
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp(null)),
+ // See the above test for why this is empty.
+ '',
+ );
+ });
+
+ it('should return proper HTML content for a formula', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(new InsertDataQuill(DataType.Formula, ''), {
+ bold: true,
+ }),
+ );
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp('ff')),
+ 'ff',
+ );
+ });
+
+ it('should return proper HTML content for an image', () => {
+ const op = new DeltaInsertOp(
+ new InsertDataQuill(DataType.Image, 'https://example.com/hello.png'),
+ );
+ const ro = new RenderOp(op, {
+ customClasses: () => 'my-custom-class',
+ customAttributes: () => ({
+ alt: 'Hello',
+ }),
+ });
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp(null)),
+ '',
+ );
+ });
+
+ it('should return proper HTML content for a video', () => {
+ const ro = new RenderOp(
+ new DeltaInsertOp(
+ new InsertDataQuill(DataType.Video, 'https://example.com/vid1.mp4'),
+ {
+ bold: true,
+ },
+ ),
+ );
+ assert.equal(
+ renderToStaticMarkup(ro.renderOp(null)),
+ ``,
+ );
+ });
+ });
+});
diff --git a/test/sanitize-mention.test.ts b/test/sanitize-mention.test.ts
new file mode 100644
index 0000000..cf88d19
--- /dev/null
+++ b/test/sanitize-mention.test.ts
@@ -0,0 +1,37 @@
+import { describe, it } from 'vitest';
+import { strict as assert } from 'node:assert';
+import { sanitizeMention } from '../src/sanitize-mention.js';
+
+describe('sanitizeMention', () => {
+ it('should run sanitized data while running the link URL through the URL sanitizer', () => {
+ const sanitized = sanitizeMention(
+ {
+ class: 'cls-9',
+ id: 'An-id_9',
+ target: '_blank',
+ link: 'http://www.yahoo.com',
+ slug: 'my-name',
+ },
+ {
+ urlSanitizer: (url) => `${url}1`,
+ },
+ );
+
+ assert.deepEqual(sanitized, {
+ class: 'cls-9',
+ id: 'An-id_9',
+ target: '_blank',
+ link: 'http://www.yahoo.com1',
+ slug: 'my-name',
+ });
+ });
+
+ it('should discard a string', () => {
+ assert.deepEqual(
+ sanitizeMention('a', {
+ urlSanitizer: (url) => url,
+ }),
+ {},
+ );
+ });
+});
diff --git a/tsconfig.json b/tsconfig.json
index 6075b9a..52a88c1 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,29 +1,24 @@
{
- "compilerOptions": {
- "module": "commonjs",
- "removeComments": true,
- "preserveConstEnums": true,
- "sourceMap": false,
- "target": "es5",
- "outDir": "dist/commonjs/",
- "lib": [
- "es6"
- ],
- "types": [
- "node",
- "mocha"
- ],
- "declaration": true,
- "noImplicitThis": true,
- "noImplicitAny": true,
- "strictNullChecks": true,
- "alwaysStrict": true,
- "noUnusedParameters": true,
- "noUnusedLocals": true,
- "noFallthroughCasesInSwitch": true,
- "esModuleInterop": true
- },
- "include": [
- "src/**/*.ts"
- ]
-}
\ No newline at end of file
+ "compilerOptions": {
+ "module": "NodeNext",
+ "moduleResolution": "NodeNext",
+ "preserveConstEnums": true,
+ "sourceMap": false,
+ "target": "ES2022",
+ "lib": ["DOM", "ES2021", "ES2023.Array"],
+ "outDir": "dist",
+ "types": ["node"],
+ "declaration": true,
+ "noImplicitThis": true,
+ "noImplicitAny": true,
+ "strict": true,
+ "strictNullChecks": true,
+ "skipLibCheck": true,
+ "noUnusedParameters": true,
+ "noUnusedLocals": true,
+ "noFallthroughCasesInSwitch": true,
+ "esModuleInterop": true,
+ "jsx": "react-jsx"
+ },
+ "include": ["src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/tsconfig.test.json b/tsconfig.test.json
new file mode 100644
index 0000000..d6b23fb
--- /dev/null
+++ b/tsconfig.test.json
@@ -0,0 +1,9 @@
+{
+ "extends": "./tsconfig.json",
+ "include": [
+ "eslint.config.js",
+ "src/**/*.ts",
+ "test/**/*.ts",
+ "test/**/*.tsx"
+ ]
+}