From 2ec11fa7919946e135c027189a44750dfad4670a Mon Sep 17 00:00:00 2001
From: Tomas Kikutis <t.kikutis@gmail.com>
Date: Mon, 3 Jun 2024 16:40:45 +0200
Subject: [PATCH] Custom editor3 blocks (#4532)

---
 e2e/client/playwright.config.ts               |   2 +
 e2e/client/playwright/editor3.spec.ts         |  84 ++-
 .../settings/content-profile.ts               |  45 ++
 e2e/client/playwright/utils/editor3.tsx       |   9 +
 .../playwright/utils/tree-select-driver.ts    |  50 ++
 e2e/server/dump/records/README.md             |   5 +-
 .../dump/records/custom-blocks.json.bz2       | Bin 0 -> 2413 bytes
 karma.conf.js                                 |   4 +-
 package-lock.json                             |  34 +-
 package.json                                  |   3 +-
 .../directives/RelatedItemsDirective.ts       |   4 +-
 .../relations/services/RelationsService.ts    |   4 +-
 scripts/apps/vocabularies/constants.ts        |  13 +-
 .../controllers/VocabularyConfigController.ts |   5 +-
 .../controllers/VocabularyEditController.tsx  | 120 ++++-
 scripts/apps/vocabularies/views/settings.html |   4 +-
 .../views/vocabulary-config-modal.html        |  67 ++-
 .../vocabularies/views/vocabulary-config.html |   1 +
 .../components/ContentProfileFieldsConfig.tsx |   2 +
 .../get-content-profiles-form-config.tsx      |   4 +
 scripts/apps/workspace/content/constants.ts   |   4 +
 .../views/FormattingOptionsMultiSelect.tsx    |  38 +-
 .../content/views/profile-settings.html       |  10 +-
 scripts/core/editor3/actions/custom-block.tsx |   4 +
 scripts/core/editor3/actions/editor3.tsx      |  11 +-
 scripts/core/editor3/actions/index.tsx        |   1 +
 scripts/core/editor3/actions/table.tsx        |   4 +-
 scripts/core/editor3/actions/toolbar.tsx      |  20 +-
 .../components/BaseUnstyledComponent.tsx      |  10 +-
 .../editor3/components/Editor3Component.tsx   |  31 +-
 .../article-embed/article-embed.tsx           |   4 +-
 .../core/editor3/components/blockRenderer.tsx |  74 ++-
 .../core/editor3/components/custom-block.scss |  46 ++
 .../core/editor3/components/custom-block.tsx  |  53 ++
 .../editor3/components/embeds/EmbedBlock.tsx  |  19 +-
 .../editor3/components/links/LinkInput.tsx    |  11 +-
 .../editor3/components/links/LinkToolbar.tsx  |  11 +-
 .../editor3/components/media/MediaBlock.tsx   |  41 +-
 .../dragable-editor3-block-with-labels.tsx    |  72 +++
 .../media/dragable-editor3-block.tsx          |   6 +-
 .../core/editor3/components/media/index.ts    |   1 -
 .../multi-line-quote/MultiLineQuote.tsx       |  36 +-
 .../editor3/components/tables/TableBlock.tsx  | 106 +++-
 .../editor3/components/tests/editor3.spec.tsx |   6 +-
 .../editor3/components/tests/embeds.spec.tsx  |   2 -
 .../editor3/components/tests/media.spec.tsx   |   7 +
 .../editor3/components/tests/tables.spec.tsx  |   2 +
 .../toolbar/MultiLineQuoteControls.tsx        | 124 -----
 .../components/toolbar/StyleButton.tsx        |  12 +-
 .../components/toolbar/TableControls.tsx      | 236 ++++++---
 .../core/editor3/components/toolbar/index.tsx | 490 +++++++++++-------
 scripts/core/editor3/constants.ts             |  10 +
 scripts/core/editor3/directive.tsx            |   6 +-
 .../get-formatting-options-for-table.tsx      |  46 ++
 scripts/core/editor3/helpers/table.ts         |  51 +-
 .../editor3/html/to-html/AtomicBlockParser.ts |  46 +-
 .../core/editor3/reducers/custom-block.tsx    |  27 +
 scripts/core/editor3/reducers/editor3.tsx     |   5 +-
 scripts/core/editor3/reducers/index.tsx       |   6 +-
 .../editor3/reducers/multi-line-quote.tsx     |  82 +--
 scripts/core/editor3/reducers/table.tsx       | 199 ++++---
 scripts/core/editor3/reducers/toolbar.tsx     |  38 +-
 scripts/core/editor3/store/index.ts           |   6 +-
 scripts/core/editor3/styles.scss              |  10 +-
 scripts/core/helpers/utils.tsx                |   4 +
 scripts/core/superdesk-api.d.ts               | 117 +++--
 .../generic-list-page-item-view-edit.tsx      |   5 +-
 .../components/ListPage/generic-list-page.tsx |  10 +-
 .../input-types/select_multiple_values.tsx    |  16 +-
 .../generic-form/tests/generic-form.spec.tsx  |   4 +-
 scripts/core/ui/ui.ts                         |   2 +-
 styles/sass/app.scss                          |   2 +
 72 files changed, 1756 insertions(+), 888 deletions(-)
 create mode 100644 e2e/client/playwright/page-object-models/settings/content-profile.ts
 create mode 100644 e2e/client/playwright/utils/tree-select-driver.ts
 create mode 100644 e2e/server/dump/records/custom-blocks.json.bz2
 create mode 100644 scripts/core/editor3/actions/custom-block.tsx
 create mode 100644 scripts/core/editor3/components/custom-block.scss
 create mode 100644 scripts/core/editor3/components/custom-block.tsx
 create mode 100644 scripts/core/editor3/components/media/dragable-editor3-block-with-labels.tsx
 delete mode 100644 scripts/core/editor3/components/media/index.ts
 delete mode 100644 scripts/core/editor3/components/toolbar/MultiLineQuoteControls.tsx
 create mode 100644 scripts/core/editor3/get-formatting-options-for-table.tsx
 create mode 100644 scripts/core/editor3/reducers/custom-block.tsx

diff --git a/e2e/client/playwright.config.ts b/e2e/client/playwright.config.ts
index 5fcb57479b..1f7786e445 100644
--- a/e2e/client/playwright.config.ts
+++ b/e2e/client/playwright.config.ts
@@ -30,6 +30,8 @@ export default defineConfig({
 
         /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
         trace: 'on-first-retry',
+
+        screenshot: 'only-on-failure',
     },
 
     /* Configure projects for major browsers */
diff --git a/e2e/client/playwright/editor3.spec.ts b/e2e/client/playwright/editor3.spec.ts
index ffbe8fe66f..9ecf26ff16 100644
--- a/e2e/client/playwright/editor3.spec.ts
+++ b/e2e/client/playwright/editor3.spec.ts
@@ -1,7 +1,8 @@
-import {test, expect} from '@playwright/test';
 import {Monitoring} from './page-object-models/monitoring';
+import {test, expect} from '@playwright/test';
 import {restoreDatabaseSnapshot, s} from './utils';
-import {getEditor3Paragraphs} from './utils/editor3';
+import {getEditor3FormattingOptions, getEditor3Paragraphs} from './utils/editor3';
+import {TreeSelectDriver} from './utils/tree-select-driver';
 
 test('accepting a spelling suggestion', async ({page}) => {
     const monitoring = new Monitoring(page);
@@ -214,3 +215,82 @@ test('tables maintaining cursor position when executing "redo" action', async ({
         page.locator(s('authoring', 'authoring-field=body_html', 'table-block')).locator('[contenteditable]').first(),
     ).toHaveText('fobaro');
 });
+
+test('configuring a vocabulary for custom blocks', async ({page}) => {
+    await restoreDatabaseSnapshot();
+
+    await page.goto('/#/settings/vocabularies');
+
+    await page.locator(s('metadata-navigation')).getByRole('button', {name: 'Custom blocks'}).click();
+
+    await page.getByRole('button', {name: 'Add New'}).click();
+
+    // Input sample data
+    await page.locator(s('vocabulary-edit-content')).getByLabel('Id').fill('custom_blocks_2');
+
+    await page.locator(s('vocabulary-edit-content')).getByLabel('Name').fill('Custom blocks 2');
+
+    await new TreeSelectDriver(
+        page,
+        page.locator(s('vocabulary-edit-content', 'formatting-options')),
+    ).setValue(['h1']);
+
+    await page.locator(s('vocabulary-edit-content', 'editor3')).getByRole('textbox').fill('test data');
+
+
+    // Apply formatting option to sample text data
+    await page.locator(s('editor3')).getByText('test data').click();
+    await page.locator(s('editor3', 'formatting-option=h1')).click();
+
+    // Save editor block
+    await page.locator(s('vocabulary-edit-footer')).getByRole('button', {name: 'Save'}).click();
+
+    await expect(page.locator(s('vocabulary-edit-content'))).not.toBeVisible(); // wait for saving to finish
+
+    // Edit custom block
+    await page.locator(s('vocabulary-item=Custom blocks 2')).hover();
+    await page.locator(s('vocabulary-item=Custom blocks 2', 'vocabulary-item--start-editing')).click();
+
+    // Check if formatting option, sample text data
+    await expect(page.locator(s('editor3', 'formatting-option=h1'))).toBeVisible();
+    await expect(page.locator(s('editor3')).getByRole('textbox')).toHaveText('test data');
+});
+
+test('adding a custom block inside editor3', async ({page}) => {
+    const monitoring = new Monitoring(page);
+
+    await restoreDatabaseSnapshot({snapshotName: 'custom-blocks'});
+
+    await page.goto('/#/workspace/monitoring');
+
+    await monitoring.selectDeskOrWorkspace('Sports');
+
+    await page.locator(
+        s('monitoring-group=Sports / Working Stage', 'article-item=test sports story'),
+    ).dblclick();
+
+    await page.locator(s('authoring', 'authoring-field=body_html')).getByRole('textbox').click();
+
+    await page.locator(
+        s('authoring', 'authoring-field=body_html', 'toolbar'),
+    ).getByRole('button', {name: 'Custom block'}).click();
+
+    await page.locator(s('tree-menu-popover'))
+        .getByRole('button', {name: 'Custom Block 1'})
+        .click();
+
+    await expect(
+        page.locator(s('authoring', 'authoring-field=body_html', 'custom-block')).getByRole('textbox').first(),
+    ).toHaveText('custom block 1 template content');
+
+    await page.locator(
+        s('authoring', 'authoring-field=body_html', 'custom-block'),
+    ).getByRole('textbox').click();
+
+    const result = await getEditor3FormattingOptions(
+        page.locator(s('authoring', 'authoring-field=body_html', 'editor3')),
+    );
+
+    expect(result).toEqual(['h2', 'italic', 'bold']);
+});
+
diff --git a/e2e/client/playwright/page-object-models/settings/content-profile.ts b/e2e/client/playwright/page-object-models/settings/content-profile.ts
new file mode 100644
index 0000000000..597742e42b
--- /dev/null
+++ b/e2e/client/playwright/page-object-models/settings/content-profile.ts
@@ -0,0 +1,45 @@
+import {Page, expect} from '@playwright/test';
+import {s} from '../../utils';
+import {TreeSelectDriver} from '../../utils/tree-select-driver';
+
+interface IOptions {
+    profileName: string;
+    sectionName: string;
+    fieldName: string;
+    formattingOptionsToAdd: Array<string>;
+}
+
+export class ContentProfileSettings {
+    private page: Page;
+
+    constructor(page: Page) {
+        this.page = page;
+    }
+
+    public async addFormattingOptionToContentProfile(options: IOptions) {
+        await this.page.locator(s(`content-profile=${options.profileName}`))
+            .getByRole('button', {name: 'Actions'})
+            .click();
+        await this.page.locator(s('content-profile-actions-popover')).getByRole('button', {name: 'Edit'}).click();
+
+        await this.page.locator(s('content-profile-edit-view')).getByRole('tab', {name: options.sectionName}).click();
+        await this.page.locator(s('content-profile-edit-view', `field=${options.fieldName}`)).click();
+
+        await new TreeSelectDriver(
+            this.page,
+            this.page.locator(s('formatting-options-input')),
+        ).setValue(options.formattingOptionsToAdd);
+
+        // this is required for validation. TODO: update DB snapshot to make current items already valid
+        await this.page.locator(s('generic-list-page', 'item-view-edit', 'gform-input--sdWidth')).selectOption('Full');
+
+        await this.page.locator(s('generic-list-page', 'item-view-edit', 'toolbar'))
+            .getByRole('button', {name: 'Apply'})
+            .click();
+
+        await this.page.locator(s('content-profile-edit-view--footer')).getByRole('button', {name: 'Save'}).click();
+
+        // wait for saving to finish and modal to close
+        await expect(this.page.locator(s('content-profile-edit-view'))).not.toBeVisible();
+    }
+}
diff --git a/e2e/client/playwright/utils/editor3.tsx b/e2e/client/playwright/utils/editor3.tsx
index 39ab2697f4..889011c84c 100644
--- a/e2e/client/playwright/utils/editor3.tsx
+++ b/e2e/client/playwright/utils/editor3.tsx
@@ -1,4 +1,5 @@
 import {Locator} from '@playwright/test';
+import {s} from '.';
 
 export function getEditor3Paragraphs(field: Locator): Promise<Array<string>> {
     return field.locator('.DraftEditor-root')
@@ -8,4 +9,12 @@ export function getEditor3Paragraphs(field: Locator): Promise<Array<string>> {
         .locator('> *')
         .allInnerTexts()
         .then((items) => items.filter((text) => text.trim().length > 0));
+}
+
+export function getEditor3FormattingOptions(field: Locator): Promise<Array<string>> {
+    return field.locator(s('toolbar', 'formatting-option'))
+        .all()
+        .then((elements) => Promise.all(
+            elements.map((element) => element.getAttribute('data-test-value')),
+        ));
 }
\ No newline at end of file
diff --git a/e2e/client/playwright/utils/tree-select-driver.ts b/e2e/client/playwright/utils/tree-select-driver.ts
new file mode 100644
index 0000000000..7193c5ed57
--- /dev/null
+++ b/e2e/client/playwright/utils/tree-select-driver.ts
@@ -0,0 +1,50 @@
+import {Locator, Page} from '@playwright/test';
+import {s} from '.';
+
+export class TreeSelectDriver {
+    private page: Page;
+    private element: Locator;
+
+    constructor(page, element) {
+        this.page = page;
+        this.element = element;
+
+        this.getValue = this.getValue.bind(this);
+        this.addValue = this.addValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+    }
+
+    public async getValue(): Promise<Array<string>> {
+        return this.element.locator(s('item')).all().then((buttons) =>
+            Promise.all(buttons.map((button) => button.innerText())),
+        );
+    }
+
+    public async addValue(...options: Array<Array<string> | string>): Promise<void> {
+        const setOptions = async (options: Array<Array<string> | string>) => {
+            for (const option of options) {
+                if (typeof option == 'string') {
+                    await this.element.locator(s('open-popover')).click();
+                    await this.page.locator(s('tree-select-popover'))
+                        .getByRole('button', {name: new RegExp(option, 'i')})
+                        .click();
+                } else if (option != null) {
+                    await setOptions(option);
+                }
+            }
+        };
+
+        await setOptions(options);
+    }
+
+    public async setValue(...options: Array<Array<string> | string>) {
+        const removeButton = await this.element.getByRole('button', {name: 'remove-sign'});
+        const removeButtonVisible = await removeButton.isVisible();
+
+        if (removeButtonVisible) {
+            await removeButton.click();
+        }
+
+        await this.addValue(...options);
+    }
+}
diff --git a/e2e/server/dump/records/README.md b/e2e/server/dump/records/README.md
index b6ee9b62ae..19d57fd79e 100644
--- a/e2e/server/dump/records/README.md
+++ b/e2e/server/dump/records/README.md
@@ -1 +1,4 @@
-editor3-tables only adds tables formatting option to story content profile. It can be merged to main. The only reason it was added as a separate record is to avoid merge conflicts on open PRs.
\ No newline at end of file
+# Can easily be ported to main snapshot:
+
+* editor3-tables - adds tables formatting option to story content profile.
+* custom-blocks - adds custom blocks to story/body_html content profile. Creates a new custom block vocabulary.
\ No newline at end of file
diff --git a/e2e/server/dump/records/custom-blocks.json.bz2 b/e2e/server/dump/records/custom-blocks.json.bz2
new file mode 100644
index 0000000000000000000000000000000000000000..51b5ba77a91e3e07b79f3dea7faff30ea0e23463
GIT binary patch
literal 2413
zcmV-z36l0gT4*^jL0KkKS+*sK1ppcfUw|k8R0sd?Kkna(zyJU0U=6<j0000005kvq
z0000006B!fCICz(6HEXACQUR9B}oUUXwVFUMt~YJ0}UpC0Ok__m;o@DO)vlenKaNb
z%q9Ua0%0(kU;qI!X`o}6Oafp8!eKPP00LywK*3T(0RT-1O&U|lsl7?CnrWo<Jv7v2
zQ&e}5XCx^~Q6iElQi_x)q?DuzB}qvX6(uB5DHNd!Qi>#nBvDYLlqo8tR6nsqhxb$^
zAJJkY<f#ZhXhp8={VTWmT)_QQs)yibi}ikE`;@a5GbyU>PsM?QXZ@upr7&5d>nyUy
zDq^Ni4-!d~Yb4emvsWtOet}l2Zp_h&eqo9hh{1BnADk#*n$_1AL@A!Er4<U589&1&
zOG_zAQDr9a7^$k?b5L567#NNvg9EwqnIO6faG_NhX0b4bMWLfCq^hd1gB77^vaF)!
zDmb|;%`jP#mRnYTtTV}WW@=o`g9XhLYRzT}T`^fM(fG9P^;3(@OBaPos-lXhDN2;2
zr72QHDIc1W3qpvhNkvGCsT8RT6%j0?MMV)QB@`5rB`G3RB`GST6$&aslqE?NlpfBz
zI=`(fn@5G0Qi?y1$K9+w%#D_Lu4B*FKaFXvRvNO;>4bjjq@_~56t$|#QNZ4dB@|qv
z^jQm(qRW?3szxiUT}!U`EZN197@1i`OwXms{Mg9HuC%39WVpc0rHzFx69v{%O_V8V
z7AYnQN<m_9e>IT8D*~2i#ha@(ZJe7pw?VkzQOTl|m@gv&k?n_f@P?k8(Z%d_QsiG4
zecyL`)o0fz@~V|ml~A^V(6F=_!tpOY=vZM74RO3Gk2M%pv?~YP&EwMQj2u6s4{Ht>
zzK6#b2s^&jDo!b5y`h9RhZv37Fo{pGPbm3a=Nug=+qziR*c_U-V(lVlB4pL4-|6vr
zOuFiraLJ2<6|C2Df1v+Q3>iqAJ9|9*=Xhh%aj!S5-KMy=$2@NhFOH+l+r8ml7-p`I
zCH;#n3VU_a3?2S-cAqKIH(kS9)oWE%ivH&BH;m_bFr2x&IxN4JA8Slr*x#hzA19Lu
zIZU~5c1&-jamj-Qeym<i7W=gpWX)zuv@q=LX`{B>4sO3AUncJAaQ5=sK0d~7dRSE_
zo65Cl!M@SSlJwP-O&k=n3W@D>Q<iPi-AZ8f&3M&jYo0tQPL7$d<(EfymR#H-RFl=+
zXqs?gU2*&Tn0W2t71g@$Z%;i1vNANDOS~y=ojAOXnRf4Pd?e$~o^DPs(K8*zmV+bC
z6uQi0xVxfSrC@R6GqIG3mo50hy<EBNGiAmb<;KjT%WL7KQ=+A+m9FkGCeJd>`+6-n
zU2d4Ihgk2scQcWRnWl<yb!_usZNbsK*|FW#OEETR<05-}L!6nWD>3nGIM+^f(a#<3
z(Ou>*Nb0iN<HJijo_3DWGRuuaq<C|NPRwPU>7v#rhFJ6B&E~r^mTZ|D5QxQ-%aJ(q
zX{J0eac1SSgfimr&5N$A*Pa>iV&k(mjB@9lOL;lx3?i7==H6!D;OEDa2958QS!>PJ
z!KCMv+^1c5xv|03!=BEMMEWOY4AkuB4vx*Z@^hv3Un@ENjvN%ncSu!gx|=p%gR1XA
z5r={@Xt1KO)R$@kQ=pTuk-<XL1TZL^I3-REPmD5$2HeR1h>yyPzZEI>sbwsxr1f-j
zY5Y!Wnn^Bw@WFX0fXeYyg_kYGV(TA+McC+Pf|rqR$h?oi*6Oi(T}__@<MqB@t@Z!Y
z@-`^`Ok-y!)`R;zAna~)Vs$$hzk>Zu(lcnnPwH&kx%d>DH6$@h!&ig!IT?<}!D|;Y
z;92!LHBQ9AQbj6F=%rOkq;yJ)_Jy07GB&y{nK6g2Pe+}j`FcI9%)b0qU5tH_V#+?}
z+Qss?IUZ(chwy$fDcCMOEN$>g^HGbxl_#(N9vdf@vAa`kp8{OgLyV8~Y+6apNLa}l
znYompszRwv36zi4zH{VcQ#lG)Ni7jeJzkHYXTRLCwR(G_<k=@eD{{T=(9zrApR5%L
za=R@IlQu^ek?Pr-*n=cBGBGfRlxj@J%2;SocydgNPck(h2PG$HVZ^&9!CyCMNmxi-
z^%R2`V9C0RGFZCnCD<`+vEn)u3PDmsv_5Xn6W3(fyNb=9@?7@1KBSD8MyE&mIv~X1
zG9aapRFhZxOGCxo$?8v=Pd-0G-Lf`Ai<+)<M&&k3$#fk~iABy+63HzJo~(<Vc4R@3
znRFH#EQO)$LdA>8!wgI@Fv9k^_@zTOsNPNuP8zA<Kg=lfL6O(G)b_l-c0T2w1@L;V
zeI$lG;-e*3Bj)%W*C?qI<_<DYr1LIjU|@AUOcMlnNis<}g^OxbIFq`2mN>~Vg#To6
z%ff%*FFohs4iM3rMkyCsI6~3|(sEhUgNczS$YEiTW0Ida(KRX@A>7r#qXQk{J>^J;
z%wlpWX*-@uP;hag7k!I2V!G%*bi0vMnsq)5*t@B9mvnJD(kaaxp}NvYaeswLE=YGe
zL$REbk~TStOBub8qRX5LI1}hHh5U?@IBHr=P6fhXsAlYBg9hzOmu_T|EL|wN@^&sT
zG#Nse%$P(hULw*x<S{`;NA2r6NPRPSb{)qf<0P_nVGi<2I!F}}?;PQwh_Vmd$i#V`
z43zNoJjbKtl6kNeI2i-m2{VPEWy~WtyG##jl0P=eDS*2I3n+<oAxTi;l?~THXi>n)
zf!ZuV&qUaygA&H68=0e1Vucy3S~84;EV!rC({#F&<gY}<b25vV6qv~H%9&$jPE8HT
zbWt9{LXdf@16gFo6e*HUD?<5Qke-GK8LB3;xzR~X50#8GUSMLP#NAR%69w0oCli3+
zVwp(9byS5EH_2#>6`@G?w`;2yjSWVS)YYS@9o~u6J+S8Jki{B8k;SbTIeDC9mKnP)
ziP%Fp!bT|ln6*2p5l?%e_L!O;5*JbrLc|`2$WA0GQbVaY3{?|^ijua6tH{8r8$<lG
ziN!KcXD4Qp;`vO|Bz358Y}HFFr09Ev*{Ok<N%TrYQd2|G1N;8s!pef5m4Z*^=~Aoj
z!poVe^s<ztDNosr;f*kPvAXP~mQtlF6_!%zRQ=YGN?l4>bh(v_FeytWH(g7_%FoB`
fYWr_Ynnt@CCZ%I#F00Ec|Ha&qP81|9iDE%OeQ1dn

literal 0
HcmV?d00001

diff --git a/karma.conf.js b/karma.conf.js
index 44f070b081..81270e970a 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -2,8 +2,6 @@ var path = require('path');
 var grunt = require('grunt');
 var makeConfig = require('./webpack.config.js');
 
-require('karma-spec-reporter');
-
 process.env.TZ = 'Europe/Prague';
 
 module.exports = function(config) {
@@ -56,7 +54,7 @@ module.exports = function(config) {
         },
 
         // test results reporter to use
-        reporters: ['spec'],
+        reporters: ['dots'],
 
         // web server port
         port: 8080,
diff --git a/package-lock.json b/package-lock.json
index 22188a56b3..b007e32004 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9046,15 +9046,6 @@
         }
       }
     },
-    "karma-spec-reporter": {
-      "version": "0.0.36",
-      "resolved": "https://registry.npmjs.org/karma-spec-reporter/-/karma-spec-reporter-0.0.36.tgz",
-      "integrity": "sha512-11bvOl1x6ryKZph7kmbmMpbi8vsngEGxGOoeTlIcDaH3ab3j8aPJnZ+r+K/SS0sBSGy5VGkGYO2+hLct7hw/6w==",
-      "dev": true,
-      "requires": {
-        "colors": "1.4.0"
-      }
-    },
     "karma-webpack": {
       "version": "2.0.13",
       "resolved": "https://registry.npmjs.org/karma-webpack/-/karma-webpack-2.0.13.tgz",
@@ -11962,6 +11953,11 @@
       "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-2.0.0.tgz",
       "integrity": "sha512-GJTCeMSQU8UU1GqbsaDrg/IH+b/vSinJQl52NVpdJ7sShYLZA8Eq6jLF48Ye3N/dQloGrE07i7XsZvxQ9pNbqg=="
     },
+    "primereact": {
+      "version": "6.6.0",
+      "resolved": "https://registry.npmjs.org/primereact/-/primereact-6.6.0.tgz",
+      "integrity": "sha512-onoowjhlOz9Kcjna1DYEKWTGjKah4MjqZchm9E3BkcWjeXoCLv3F5QnIo8eVF9q+xymEK/6Oh7zHlfCJYyWwDw=="
+    },
     "private": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -14805,11 +14801,12 @@
       }
     },
     "superdesk-ui-framework": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.1.3.tgz",
-      "integrity": "sha512-COqb+IPwqY4PE+ns2PIACp4cy1GPyZxanoJ/GUj1tHe3JW6FJWr6zkU5PV0tFU2p5JQcUI8SHHTCdJHgbER1ZQ==",
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.1.9.tgz",
+      "integrity": "sha512-mgBkdsv/mvG02WUNt+7szbw+V0xDK0BtG5nuZag/GuvHjJmTGW0s0OhuC/Q+/SGkwg/iR+C7DLYqUY4l+7TQXQ==",
       "requires": {
         "@popperjs/core": "^2.4.0",
+        "@superdesk/common": "0.0.28",
         "@superdesk/primereact": "^5.0.2-12",
         "@superdesk/react-resizable-panels": "0.0.39",
         "@types/enzyme-adapter-react-16": "^1.0.6",
@@ -14827,6 +14824,19 @@
         "react-scrollspy": "^3.4.3"
       },
       "dependencies": {
+        "@superdesk/common": {
+          "version": "0.0.28",
+          "resolved": "https://registry.npmjs.org/@superdesk/common/-/common-0.0.28.tgz",
+          "integrity": "sha512-EhsYMm340r3FVrakH00lLvQbxVYYTzL61J5GXI3BI2xLN2dPI3N0AJEaMGqjbt0xUpUFxE3T08OtYvIC5koZvg==",
+          "requires": {
+            "date-fns": "2.7.0",
+            "lodash": "4.17.19",
+            "primereact": "^6.0.2",
+            "react": "16.9.0",
+            "react-dom": "16.9.0",
+            "react-sortable-hoc": "^1.11.0"
+          }
+        },
         "@types/node": {
           "version": "14.18.63",
           "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.63.tgz",
diff --git a/package.json b/package.json
index 57c8ec0ac9..d9ef6512b9 100644
--- a/package.json
+++ b/package.json
@@ -122,7 +122,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "^3.1.3",
+    "superdesk-ui-framework": "^3.1.9",
     "ts-loader": "3.5.0",
     "typescript": "4.9.5",
     "uuid": "8.3.1",
@@ -145,7 +145,6 @@
     "karma-jasmine": "^1.1.1",
     "karma-ng-html2js-preprocessor": "^1.0.0",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.36",
     "karma-webpack": "^2.0.13",
     "react-addons-test-utils": "^15.6.0",
     "react-test-renderer": "^16.13.1",
diff --git a/scripts/apps/relations/directives/RelatedItemsDirective.ts b/scripts/apps/relations/directives/RelatedItemsDirective.ts
index ed4570a51d..0955be957a 100644
--- a/scripts/apps/relations/directives/RelatedItemsDirective.ts
+++ b/scripts/apps/relations/directives/RelatedItemsDirective.ts
@@ -1,6 +1,6 @@
 import {gettext} from 'core/utils';
 import {AuthoringWorkspaceService} from 'apps/authoring/authoring/services/AuthoringWorkspaceService';
-import {IArticle, IVocabulary, IRendition} from 'superdesk-api';
+import {IArticle, IRendition, IVocabularyRelatedContent, IVocabularyMedia} from 'superdesk-api';
 import {IDirectiveScope} from 'types/Angular/DirectiveScope';
 import {getAssociationsByFieldId} from '../../authoring/authoring/controllers/AssociationController';
 import {getThumbnailForItem} from 'core/helpers/item';
@@ -14,7 +14,7 @@ interface IScope extends IDirectiveScope<void> {
     relatedItemsNewButton: typeof RelatedItemCreateNewButton;
     onCreated: (items: Array<IArticle>) => void;
     gettext: (text: any, params?: any) => string;
-    field: IVocabulary;
+    field: IVocabularyMedia | IVocabularyRelatedContent;
     editable: boolean;
     item: IArticle;
     loading: boolean;
diff --git a/scripts/apps/relations/services/RelationsService.ts b/scripts/apps/relations/services/RelationsService.ts
index 55b92936b8..7394153e82 100644
--- a/scripts/apps/relations/services/RelationsService.ts
+++ b/scripts/apps/relations/services/RelationsService.ts
@@ -1,5 +1,5 @@
 import {zipObject} from 'lodash';
-import {IArticle, IVocabulary} from 'superdesk-api';
+import {IArticle, IVocabularyMedia, IVocabularyRelatedContent} from 'superdesk-api';
 import {isPublished, isIngested} from 'apps/archive/utils';
 import {gettext} from 'core/utils';
 
@@ -79,7 +79,7 @@ export function RelationsService(api, $q) {
         })).then((values) => zipObject(relatedItemsKeys, values));
     };
 
-    this.itemHasAllowedStatus = function(item: IArticle, field: IVocabulary) {
+    this.itemHasAllowedStatus = function(item: IArticle, field: IVocabularyRelatedContent | IVocabularyMedia) {
         return validateWorkflow(item, field?.field_options?.allowed_workflows ?? {}).result;
     };
 }
diff --git a/scripts/apps/vocabularies/constants.ts b/scripts/apps/vocabularies/constants.ts
index 7a8186e6e3..53ccb1886b 100644
--- a/scripts/apps/vocabularies/constants.ts
+++ b/scripts/apps/vocabularies/constants.ts
@@ -1,6 +1,17 @@
 import {gettext} from 'core/utils';
 
-export function getMediaTypes() {
+interface IMediaType {
+    GALLERY: {
+        id: 'media';
+        label: string;
+    };
+    RELATED_CONTENT: {
+        id: 'related_content';
+        label: string;
+    }
+}
+
+export function getMediaTypes(): IMediaType {
     return {
         GALLERY: {
             id: 'media',
diff --git a/scripts/apps/vocabularies/controllers/VocabularyConfigController.ts b/scripts/apps/vocabularies/controllers/VocabularyConfigController.ts
index af87a3740b..45f84d43e5 100644
--- a/scripts/apps/vocabularies/controllers/VocabularyConfigController.ts
+++ b/scripts/apps/vocabularies/controllers/VocabularyConfigController.ts
@@ -1,10 +1,11 @@
 import {DEFAULT_SCHEMA, getVocabularySelectionTypes, getMediaTypeKeys, getMediaTypes} from '../constants';
-import {IVocabulary, IVocabularyItem, IVocabularyTag} from 'superdesk-api';
+import {IVocabulary, IVocabularyTag} from 'superdesk-api';
 import {IDirectiveScope} from 'types/Angular/DirectiveScope';
 import {remove, reduce} from 'lodash';
 import {gettext, downloadFile} from 'core/utils';
 import {showModal} from '@superdesk/common';
 import {UploadConfig} from '../components/UploadConfigModal';
+import {EDITOR_BLOCK_FIELD_TYPE} from 'apps/workspace/content/constants';
 
 function getOther() {
     return gettext('Other');
@@ -110,7 +111,7 @@ export function VocabularyConfigController($scope: IScope, $route, $routeParams,
     $scope.matchFieldTypeToTab = (tab, fieldType) =>
         tab === 'vocabularies' && !fieldType || fieldType &&
         (tab === 'text-fields' && fieldType === 'text' ||
-            tab === 'custom-editor-blocks' && fieldType === 'editor-block' ||
+            tab === 'custom-editor-blocks' && fieldType === EDITOR_BLOCK_FIELD_TYPE ||
             tab === 'date-fields' && fieldType === 'date' ||
             tab === 'urls-fields' && fieldType === 'urls' ||
             tab === 'related-content-fields' && getMediaTypeKeys().includes(fieldType) ||
diff --git a/scripts/apps/vocabularies/controllers/VocabularyEditController.tsx b/scripts/apps/vocabularies/controllers/VocabularyEditController.tsx
index ed0db373e0..578274ce86 100644
--- a/scripts/apps/vocabularies/controllers/VocabularyEditController.tsx
+++ b/scripts/apps/vocabularies/controllers/VocabularyEditController.tsx
@@ -4,10 +4,14 @@ import _ from 'lodash';
 import {IVocabularySelectionTypes, getVocabularySelectionTypes, getMediaTypeKeys, getMediaTypes} from '../constants';
 import {gettext} from 'core/utils';
 import {getFields} from 'apps/fields';
-import {IVocabulary} from 'superdesk-api';
+import {IArticle, IVocabulary, RICH_FORMATTING_OPTION} from 'superdesk-api';
 import {IScope as IScopeConfigController} from './VocabularyConfigController';
 import {VocabularyItemsViewEdit} from '../components/VocabularyItemsViewEdit';
 import {defaultAllowedWorkflows} from 'apps/relations/services/RelationsService';
+import {EDITOR_BLOCK_FIELD_TYPE} from 'apps/workspace/content/constants';
+import {getEditor3RichTextFormattingOptions} from 'apps/workspace/content/components/get-content-profiles-form-config';
+import {ContentState, convertToRaw} from 'draft-js';
+import {getFormattingOptionsForTableLikeBlocks} from 'core/editor3/get-formatting-options-for-table';
 
 VocabularyEditController.$inject = [
     '$scope',
@@ -32,13 +36,24 @@ interface IScope extends IScopeConfigController {
     _errorUniqueness: boolean;
     errorMessage: string;
     save: () => void;
+
+    // custom-editor-block props START
+    formattingOptionsOnChange?: (options: Array<RICH_FORMATTING_OPTION>) => void;
+    editorBlockFormattingOptions?: Array<{value: [RICH_FORMATTING_OPTION, string]}>;
+    fakeItem?: Partial<IArticle>;
+    editorBlockFieldId?: string;
+    // custom-editor-block props END
+
+    updateUI: () => void;
+    requestEditor3DirectivesToGenerateHtml: Array<() => void>;
+    handleTemplateValueChange: (value: string) => void;
     requireAllowedTypesSelection: () => void;
     addItem: () => void;
     cancel: () => void;
     model: any;
     schema: any;
     schemaFields: Array<any>;
-    itemsValidation: { valid: boolean };
+    itemsValidation: {valid: boolean};
     customFieldTypes: Array<{id: string, label: string}>;
     setCustomFieldConfig: (config: any) => void;
     editForm: any;
@@ -47,6 +62,9 @@ interface IScope extends IScopeConfigController {
 }
 
 const idRegex = '^[a-zA-Z0-9-_]+$';
+const editorBlockFieldId = 'editor_block_field';
+
+type IFormattingOptionTuple = [notTranslatedOption: RICH_FORMATTING_OPTION, translatedOption: string];
 
 export function VocabularyEditController(
     $scope: IScope, notify, api, metadata, cvSchema, relationsService, $timeout,
@@ -61,16 +79,22 @@ export function VocabularyEditController(
         $scope.tab = tab;
     };
 
+    $scope.requestEditor3DirectivesToGenerateHtml = [];
+
     $scope.idRegex = idRegex;
     $scope.selectionTypes = getVocabularySelectionTypes();
 
-    if ($scope.matchFieldTypeToTab('related-content-fields', $scope.vocabulary.field_type)) {
+    if (
+        $scope.matchFieldTypeToTab('related-content-fields', $scope.vocabulary.field_type)
+        && $scope.vocabulary.field_type === 'related_content'
+    ) {
+        const vocab = $scope.vocabulary;
+
         // Insert default allowed workflows
-        if ($scope.vocabulary.field_options == null) {
-            $scope.vocabulary.field_options = {allowed_workflows: defaultAllowedWorkflows};
-        } else if ($scope.vocabulary.field_options.allowed_workflows == null) {
-            $scope.vocabulary.field_options.allowed_workflows = defaultAllowedWorkflows;
-        }
+        vocab.field_options = {
+            ...(vocab.field_options ?? {}),
+            allowed_workflows: defaultAllowedWorkflows,
+        };
     }
 
     function onSuccess(result) {
@@ -84,10 +108,9 @@ export function VocabularyEditController(
     function onError(response) {
         if (angular.isDefined(response.data._issues)) {
             if (angular.isDefined(response.data._issues['validator exception'])) {
-                notify.error(gettext('Error: ' +
-                                     response.data._issues['validator exception']));
+                notify.error(gettext('Error: {{ message }}', {message: response.data._issues['validator exception']}));
             } else if (angular.isDefined(response.data._issues.error) &&
-                       response.data._issues.error.required_field) {
+                response.data._issues.error.required_field) {
                 let params = response.data._issues.params;
 
                 notify.error(gettext(
@@ -111,6 +134,52 @@ export function VocabularyEditController(
         return true;
     }
 
+    if ($scope.vocabulary.field_type === EDITOR_BLOCK_FIELD_TYPE) {
+        const vocabulary = $scope.vocabulary;
+
+        $scope.editorBlockFieldId = editorBlockFieldId;
+
+        $scope.fakeItem = {
+            fields_meta: {
+
+                /**
+                 * Fake field, needed for compatibility with sdEditor3 directive
+                 */
+                [editorBlockFieldId]: {
+                    draftjsState: vocabulary.field_options?.template != null
+                        ? vocabulary.field_options.template
+                        : [convertToRaw(ContentState.createFromText(''))],
+                },
+            },
+        };
+
+        $scope.editorBlockFormattingOptions = ((): Array<{value: IFormattingOptionTuple}> => {
+            const allFormattingOptionsTranslated = getEditor3RichTextFormattingOptions();
+
+            return getFormattingOptionsForTableLikeBlocks().map(
+                (option) => ({value: [option, allFormattingOptionsTranslated[option]]}),
+            );
+        })();
+
+        $scope.formattingOptionsOnChange = function(options) {
+            if (vocabulary.field_options == null) {
+                vocabulary.field_options = {};
+            }
+
+            vocabulary.field_options.formatting_options = options;
+
+            /**
+             * Apply current changes to item and save them to the field as html,
+             * so when formatting options are updated editor sill has the changes
+             */
+            $scope.requestEditor3DirectivesToGenerateHtml.forEach((fn) => {
+                fn();
+            });
+
+            $scope.updateUI();
+        };
+    }
+
     /**
      * Save current edit modal contents on backend.
      */
@@ -120,6 +189,22 @@ export function VocabularyEditController(
         $scope.errorMessage = null;
         delete $scope.vocabulary['_deleted'];
 
+        if ($scope.vocabulary.field_type === EDITOR_BLOCK_FIELD_TYPE) {
+            $scope.requestEditor3DirectivesToGenerateHtml.forEach((fn) => {
+                fn();
+            });
+            $scope.vocabulary.field_options = $scope.vocabulary.field_options ?? {};
+
+            /**
+             * Formatting options are updated in formattingOptionsOnChange and
+             * don't need to be updated explicitly here again.
+             */
+            $scope.vocabulary.field_options = {
+                ...$scope.vocabulary.field_options,
+                template: $scope.fakeItem.fields_meta?.[editorBlockFieldId].draftjsState,
+            };
+        }
+
         if ($scope.vocabulary._id === 'crop_sizes') {
             var activeItems = _.filter($scope.vocabulary.items, (o) => o.is_active);
 
@@ -175,7 +260,7 @@ export function VocabularyEditController(
             return false;
         }
 
-        if ($scope.vocabulary.field_options == null || $scope.vocabulary.field_options.allowed_types == null) {
+        if ($scope.vocabulary.field_type !== 'related_content') {
             return true;
         }
 
@@ -231,12 +316,16 @@ export function VocabularyEditController(
         label: fields[id].label,
     }));
 
-    $scope.setCustomFieldConfig = (config) => {
-        $scope.vocabulary.custom_field_config = config;
+    $scope.updateUI = () => {
         $scope.editForm.$setDirty();
         $scope.$applyAsync();
     };
 
+    $scope.setCustomFieldConfig = (config) => {
+        $scope.vocabulary.custom_field_config = config;
+        $scope.updateUI();
+    };
+
     let placeholderElement = null;
 
     // wait for the template to render to the placeholder element is available
@@ -252,8 +341,7 @@ export function VocabularyEditController(
                 schemaFields={$scope.schemaFields}
                 newItemTemplate={{...$scope.model, is_active: true}}
                 setDirty={() => {
-                    $scope.editForm.$setDirty();
-                    $scope.$apply();
+                    $scope.updateUI();
                 }}
                 setItemsValid={(valid) => {
                     $scope.itemsValidation.valid = valid;
diff --git a/scripts/apps/vocabularies/views/settings.html b/scripts/apps/vocabularies/views/settings.html
index d0f0bf04bb..fc2c02d37e 100644
--- a/scripts/apps/vocabularies/views/settings.html
+++ b/scripts/apps/vocabularies/views/settings.html
@@ -4,13 +4,13 @@
             <h2 class="sd-page__page-heading" translate>Metadata management</h2>
             <span class="sd-page__element-grow"></span>
             <button class="btn btn--hollow btn--primary"
-                ng-click="uploadConfig()" ng-if="tab === 'vocabularies'">
+                ng-click="uploadConfig()" ng-if="tab === 'vocabularies' || tab === 'custom-editor-blocks'">
                 <i class="icon-upload icon--blue"></i>
                 <span translate>Upload Config</span>
             </button>
         </div>
 
-        <div class="sd-page__header sd-page__header--white">
+        <div data-test-id="metadata-navigation" class="sd-page__header sd-page__header--white">
             <ul class="nav nav-tabs">
                 <li ng-class="{active: tab === 'vocabularies'}">
                     <button ng-click="tab = 'vocabularies'" translate>Vocabularies</button>
diff --git a/scripts/apps/vocabularies/views/vocabulary-config-modal.html b/scripts/apps/vocabularies/views/vocabulary-config-modal.html
index 91aa88a019..a29ac0c95e 100644
--- a/scripts/apps/vocabularies/views/vocabulary-config-modal.html
+++ b/scripts/apps/vocabularies/views/vocabulary-config-modal.html
@@ -6,10 +6,14 @@ <h3 class="modal__heading" ng-show="vocabulary._id"><span translate>Edit</span>
             <h3 class="modal__heading" ng-show="!vocabulary._id"><span translate>Create</span></h3>
             <a href="" class="icn-btn close-modal" ng-click="cancel()"><i class="icon-close-small"></i></a>
         </div>
-        <div class="modal__body modal__body--with-navigation">
+        <div class="modal__body modal__body--with-navigation" data-test-id="vocabulary-edit-content">
             <ul class="modal__navigation" ng-if="matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
-                <li ng-class="{'active': tab === 'general'}"><button ng-click="setTab('general')" translate>General</button></li>
-                <li ng-class="{'active': tab === 'items'}"><button ng-click="setTab('items')" translate>Items</button></li>
+                <li ng-class="{'active': tab === 'general'}">
+                    <button ng-click="setTab('general')" translate>General</button>
+                </li>
+                <li ng-class="{'active': tab === 'items'}">
+                    <button ng-click="setTab('items')" translate>Items</button>
+                </li>
             </ul>
 
             <div class="modal__navigation--content">
@@ -23,8 +27,16 @@ <h3 class="modal__heading" ng-show="!vocabulary._id"><span translate>Create</spa
                             ng-class="{'sd-line-input--invalid': issues._id, 'sd-line-input--required': !vocabulary._id}"
                             ng-if="!vocabulary._links || !matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
                             <label for="cv_id" class="sd-line-input__label" translate>ID</label>
-                            <input id="cv_id" class="sd-line-input__input" type="text" ng-model="vocabulary._id"
-                                ng-pattern="idRegex" ng-readonly="!!vocabulary._links" required>
+                            <input
+                                id="cv_id"
+                                class="sd-line-input__input"
+                                type="text"
+                                ng-model="vocabulary._id"
+                                ng-pattern="idRegex"
+                                ng-readonly="!!vocabulary._links"
+                                required
+                                data-test-id="vocabulary-edit--id"
+                            >
                             <div class="sd-line-input__message" ng-show="issues._id.unique || issues._id.deleted"
                                 translate>ID must be unique.</div>
                             <div class="sd-line-input__message" ng-show="issues._id.conflict" translate>ID conflicts
@@ -95,7 +107,8 @@ <h3 class="modal__heading" ng-show="!vocabulary._id"><span translate>Create</spa
                             </div>
                         </div>
 
-                        <div class="form__row">
+                        <div class="form__row"
+                            ng-if="matchFieldTypeToTab('custom-editor-blocks', vocabulary.field_type) === false">
                             <div class="sd-line-input"
                                 ng-class="{'sd-line-input--invalid': vocabularyForm.$error.maxlength}">
                                 <label for="cv_helper_text" class="sd-line-input__label" translate>Helper
@@ -147,13 +160,49 @@ <h3 class="modal__heading" ng-show="!vocabulary._id"><span translate>Create</spa
                             </ul>
                         </div>
 
-                        <div class="sd-line-input"
-                            ng-if="matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
+                        <div
+                            class="sd-line-input"
+                            ng-if="matchFieldTypeToTab('vocabularies', vocabulary.field_type)"
+                        >
                             <sd-check ng-model="vocabulary.disable_entire_category_selection">
                                 <span translate>Disable selection of an entire category</span>
                             </sd-check>
                         </div>
 
+                        <div
+                            class="sd-line-input"
+                            ng-if="matchFieldTypeToTab('custom-editor-blocks', vocabulary.field_type)"
+                        >
+                            <label class="sd-line-input__label" translate>Formatting Options</label>
+                            <sd-formatting-options-tree-select
+                                value="vocabulary.field_options.formatting_options"
+                                on-change="formattingOptionsOnChange"
+                                options="editorBlockFormattingOptions"
+                            />
+                        </div>
+                        <div
+                            class="sd-line-input"
+                            ng-if="matchFieldTypeToTab('custom-editor-blocks', vocabulary.field_type)"
+                        >
+                            <label class="sd-line-input__label" translate>Sample content</label>
+                            <div
+                                class="main-editor-3-style"
+                                id="title"
+                                sd-editor3
+                                data-path-to-value="editorBlockFieldId"
+                                data-editor-format="vocabulary.field_options.formatting_options"
+                                data-single-line="false"
+                                data-scroll-container=".page-content-container--scrollable"
+                                data-language="'en'"
+                                data-on-change="updateUI()"
+                                data-read-only="false"
+                                editor-state="fakeItem.fields_meta[editorBlockFieldId].draftjsState"
+                                output-editor-state="true"
+                                data-item="fakeItem"
+                                data-refresh-trigger="refreshTrigger"
+                                data-test-id="field--editor-block"
+                            ></div>
+                        </div>
                         <div class="sd-line-input" ng-if="matchFieldTypeToTab('vocabularies', vocabulary.field_type)">
                             <sd-check ng-model="vocabulary.preffered_items">
                                 {{ :: 'Available in user/desk preferences' | translate }}</sd-check>
@@ -267,7 +316,7 @@ <h3 class="modal__heading" ng-show="!vocabulary._id"><span translate>Create</spa
             </div>
         </div>
 
-        <div class="modal__footer">
+        <div class="modal__footer" data-test-id="vocabulary-edit-footer">
             <div class="button-group button-group--end button-group--comfort" role="group">
                 <button
                     id="cancel-edit-btn"
diff --git a/scripts/apps/vocabularies/views/vocabulary-config.html b/scripts/apps/vocabularies/views/vocabulary-config.html
index 679039af5b..04acd8dee9 100644
--- a/scripts/apps/vocabularies/views/vocabulary-config.html
+++ b/scripts/apps/vocabularies/views/vocabulary-config.html
@@ -63,6 +63,7 @@
                   class="sd-list-item sd-shadow--z1"
                   ng-repeat="vocabulary in getVocabulariesForTag(tag, tab) | orderBy:'display_name|translate' | filter: filterVocabulary track by vocabulary._id"
                   data-test-id="vocabulary-item"
+                  data-test-value="{{ vocabulary.display_name }}"
                 >
                     <div class="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
                         <div class="sd-list-item__row">
diff --git a/scripts/apps/workspace/content/components/ContentProfileFieldsConfig.tsx b/scripts/apps/workspace/content/components/ContentProfileFieldsConfig.tsx
index 0d0708f8e4..aea359c740 100644
--- a/scripts/apps/workspace/content/components/ContentProfileFieldsConfig.tsx
+++ b/scripts/apps/workspace/content/components/ContentProfileFieldsConfig.tsx
@@ -137,6 +137,8 @@ class ItemBase extends React.PureComponent<{wrapper: IPropsItem}> {
                         page.startEditing(getId(item));
                     }
                 }}
+                data-test-id="field"
+                data-test-value={getLabel(item.id)}
             >
                 {
                     canAddNewField
diff --git a/scripts/apps/workspace/content/components/get-content-profiles-form-config.tsx b/scripts/apps/workspace/content/components/get-content-profiles-form-config.tsx
index c6d8bae9fc..0ed4361400 100644
--- a/scripts/apps/workspace/content/components/get-content-profiles-form-config.tsx
+++ b/scripts/apps/workspace/content/components/get-content-profiles-form-config.tsx
@@ -52,6 +52,7 @@ export const getEditor3RichTextFormattingOptions = (): {[MEMBER in RICH_FORMATTI
         'bold': gettext('bold'),
         'table': gettext('table'),
         'multi-line quote': gettext('multi-line quote'),
+        'custom blocks': gettext('custom blocks'),
         'formatting marks': gettext('formatting marks'),
         'remove format': gettext('remove format'),
         'remove all format': gettext('remove all format'),
@@ -81,6 +82,8 @@ export const formattingOptionsUnsafeToParseFromHTML: Array<RICH_FORMATTING_OPTIO
     'pre',
     'embed',
     'embed articles',
+    'multi-line quote',
+    'custom blocks',
     'media',
     'table',
 ];
@@ -256,6 +259,7 @@ export function getContentProfileFormConfig(
             component_parameters: {
                 items: Object.entries(getEditor3FormattingOptions(field.id, customFields))
                     .map(([id, translatedLabel]) => ({id: id, label: translatedLabel})),
+                dataTestId: 'formatting-options-input',
             },
         };
 
diff --git a/scripts/apps/workspace/content/constants.ts b/scripts/apps/workspace/content/constants.ts
index 6c34b28f4e..41b6838945 100644
--- a/scripts/apps/workspace/content/constants.ts
+++ b/scripts/apps/workspace/content/constants.ts
@@ -103,6 +103,9 @@ export const EXTRA_EDITOR_FIELDS = Object.freeze({
     media_description: {enabled: true},
 });
 
+
+export const EDITOR_BLOCK_FIELD_TYPE = 'editor-block';
+
 /**
  * Vocabulary types used for custom fields
  */
@@ -112,5 +115,6 @@ export const CUSTOM_FIELD_TYPES = [
     'media',
     'embed',
     'urls',
+    EDITOR_BLOCK_FIELD_TYPE,
     'custom',
 ];
diff --git a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx
index abb4cef400..b3c8a6fa8e 100644
--- a/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx
+++ b/scripts/apps/workspace/content/views/FormattingOptionsMultiSelect.tsx
@@ -1,48 +1,32 @@
 import React from 'react';
 import {TreeSelect} from 'superdesk-ui-framework/react';
-import {IArticleField} from 'superdesk-api';
+import {RICH_FORMATTING_OPTION} from 'superdesk-api';
 import {gettext} from 'core/utils';
-import {
-    getEditor3RichTextFormattingOptions,
-    getEditor3PlainTextFormattingOptions,
-    HAS_RICH_FORMATTING_OPTIONS,
-} from '../components/get-content-profiles-form-config';
 
 interface IProps {
     value: Array<string> | null;
-    fieldId: string;
-    fields: Dictionary<string, IArticleField>;
-    onChange(value: Array<string>, fieldId: string): void;
+    onChange(value: Array<string>): void;
+    options: Array<{value: [RICH_FORMATTING_OPTION, string]}>;
 }
 
 export class FormattingOptionsTreeSelect extends React.Component<IProps> {
     render(): React.ReactNode {
-        const {fields, fieldId} = this.props;
-
-        const isCustomPlainTextField = typeof fields[fieldId] === 'object' && fields[fieldId].field_type === 'text';
-        const isRichOrCustomTextField =
-            Object.keys(HAS_RICH_FORMATTING_OPTIONS).includes(fieldId) || isCustomPlainTextField;
-        const formattingOptions = Object.entries(
-            isRichOrCustomTextField
-                ? getEditor3RichTextFormattingOptions()
-                : getEditor3PlainTextFormattingOptions(),
-        )
-            .map(([notTranslatedOption, translatedOption]) => ({value: [notTranslatedOption, translatedOption]}));
+        const lookup: Map<RICH_FORMATTING_OPTION, string> = new Map(
+            this.props.options.map(({value}) => value),
+        );
 
-        const values = this.props.value != null
-            ? formattingOptions
-                .filter((option) => this.props.value.includes(option.value[0]))
-                .map((option) => option.value)
-            : [];
+        const values: Array<[RICH_FORMATTING_OPTION, string]> =
+            (this.props.value ?? []).map((id: RICH_FORMATTING_OPTION) => [id, lookup.get(id)]);
 
         return (
             <TreeSelect
+                data-test-id="formatting-options"
                 kind="synchronous"
                 getId={(option) => option[0]}
                 getLabel={(option) => option[1]}
-                getOptions={() => formattingOptions}
+                getOptions={() => this.props.options}
                 onChange={(newFormattingOptions) => {
-                    this.props.onChange(newFormattingOptions.map((option) => option[0]), this.props.fieldId);
+                    this.props.onChange(newFormattingOptions.map((option) => option[0]));
                 }}
                 value={values}
                 allowMultiple
diff --git a/scripts/apps/workspace/content/views/profile-settings.html b/scripts/apps/workspace/content/views/profile-settings.html
index 630a680095..350f3c2625 100644
--- a/scripts/apps/workspace/content/views/profile-settings.html
+++ b/scripts/apps/workspace/content/views/profile-settings.html
@@ -33,10 +33,12 @@ <h2 class="sd-page__page-heading" translate>Content Profiles</h2>
                     ng-repeat="type in ctrl.items| orderBy: 'label' | filter: query track by type._id"
                     ng-class="{inactive: !type.enabled}"
                     ng-show="(!active_only || (active_only && type.enabled)) && (contentTypeFilter == null || contentTypeFilter === type.type)"
+                    data-test-id="content-profile"
+                    data-test-value="{{type.label}}"
                 >
                     <div class="card-box__header">
-                        <div class="dropdown" dropdown>
-                            <button class="dropdown__toggle" dropdown__toggle>
+                        <div class="dropdown" dropdown data-test-id="content-profile-actions-popover">
+                            <button class="dropdown__toggle" dropdown__toggle aria-label="{{:: 'Actions' | translate }}">
                                 <i class="icon-dots-vertical"></i>
                             </button>
                             <ul class="dropdown__menu more-activity-menu pull-right">
@@ -133,7 +135,7 @@ <h3 class="modal__heading" translate>Add New Content Profile</h3>
     <div class="modal__header"> <a href="" class="close" ng-click="ctrl.toggleEdit()"><i class="icon-close-small"></i></a>
         <h3 class="modal__heading">{{ :: 'Editing' | translate }} "{{ editing.form.label}}"</h3>
     </div>
-    <div class="modal__body sd-padding--0 sd-padding-t--2">
+    <div class="modal__body sd-padding--0 sd-padding-t--2" data-test-id="content-profile-edit-view">
         <form name="editForm">
             <fieldset ng-init="setNgForm(editForm)">
                 <div class="form__row form__row--flex sd-padding-x--2" style="align-items: center">
@@ -182,7 +184,7 @@ <h3 class="modal__heading">{{ :: 'Editing' | translate }} "{{ editing.form.label
             </fieldset>
         </form>
     </div>
-    <div class="modal__footer">
+    <div class="modal__footer" data-test-id="content-profile-edit-view--footer">
         <button id="profile-update" class="btn btn--primary" ng-disabled="editForm.$invalid || !editForm.$dirty || ctrl.savingInProgress" ng-click="ctrl.update()" translate>Save</button>
         <button class="btn" ng-click="ctrl.toggleEdit()" translate>Cancel</button>
     </div>
diff --git a/scripts/core/editor3/actions/custom-block.tsx b/scripts/core/editor3/actions/custom-block.tsx
new file mode 100644
index 0000000000..759439e8fa
--- /dev/null
+++ b/scripts/core/editor3/actions/custom-block.tsx
@@ -0,0 +1,4 @@
+import {RawDraftContentState} from 'draft-js';
+
+export const addCustomBlock = (initialContent: RawDraftContentState, vocabularyId: string, label: string) =>
+    ({type: 'TOOLBAR_ADD_CUSTOM_BLOCK', payload: {initialContent, vocabularyId, label}});
diff --git a/scripts/core/editor3/actions/editor3.tsx b/scripts/core/editor3/actions/editor3.tsx
index ebdf125aef..57b53e8508 100644
--- a/scripts/core/editor3/actions/editor3.tsx
+++ b/scripts/core/editor3/actions/editor3.tsx
@@ -2,7 +2,7 @@ import ng from 'core/services/ng';
 import {insertMedia} from './toolbar';
 import {logger} from 'core/services/logger';
 import {SelectionState, convertFromRaw} from 'draft-js';
-import {IArticle, ISetActiveCellReturnType} from 'superdesk-api';
+import {IArticle} from 'superdesk-api';
 import {getFieldMetadata, fieldsMetaKeys} from '../helpers/fieldsMeta';
 import {
     CharacterLimitUiBehavior,
@@ -11,9 +11,10 @@ import {
 import {IEditorStore} from '../store';
 import {IEditorDragDropPayload} from '../reducers/editor3';
 import {MIME_TYPE_SUPERDESK_TEXT_ITEM} from '../constants';
-import {getArticleLabel, gettext} from 'core/utils';
 import {notify} from 'core/notify/notify';
 import {canAddArticleEmbed} from '../components/article-embed/can-add-article-embed';
+import {ISetActiveCellReturnType, IActiveCell} from '../components/tables/TableBlock';
+import {gettext} from 'core/utils';
 
 /**
  * @ngdoc method
@@ -180,10 +181,10 @@ export function setReadOnly(v) {
  * @name setActiveCell
  * @description Sets the active table and cell inside the editor.
  */
-export function setActiveCell(i, j, key, currentStyle, selection): ISetActiveCellReturnType {
+export function setActiveCell(activeCell: IActiveCell): ISetActiveCellReturnType {
     return {
         type: 'EDITOR_SET_CELL',
-        payload: {i, j, key, currentStyle, selection},
+        payload: activeCell,
     };
 }
 
@@ -302,7 +303,7 @@ export function autocomplete(value: string) {
 }
 
 export type IActionPayloadSetExternalOptions =
-    Pick<IEditorStore, 'readOnly' | 'singleLine' | 'editorFormat' | 'spellchecking' | 'limitConfig' | 'item'>;
+    Partial<Pick<IEditorStore, 'readOnly' | 'singleLine' | 'editorFormat' | 'spellchecking' | 'limitConfig' | 'item'>>;
 
 export function setExternalOptions(payload: IActionPayloadSetExternalOptions) {
     return {
diff --git a/scripts/core/editor3/actions/index.tsx b/scripts/core/editor3/actions/index.tsx
index ee4b943183..d092ce9d60 100644
--- a/scripts/core/editor3/actions/index.tsx
+++ b/scripts/core/editor3/actions/index.tsx
@@ -7,3 +7,4 @@ export * from './table';
 export * from './highlights';
 export * from './popups';
 export * from './suggestions';
+export * from './custom-block';
diff --git a/scripts/core/editor3/actions/table.tsx b/scripts/core/editor3/actions/table.tsx
index 42ed222527..ce7c2951ef 100644
--- a/scripts/core/editor3/actions/table.tsx
+++ b/scripts/core/editor3/actions/table.tsx
@@ -73,9 +73,9 @@ export function toggleTableStyle(inlineStyle) {
     };
 }
 
-export function toggleMultiLineQuoteBlockStyle(style) {
+export function toggleTableBlockType(style) {
     return {
-        type: 'TOOLBAR_MULTI-LINE_STYLE',
+        type: 'TOOLBAR_TABLE_BLOCK_TYPE',
         payload: style,
     };
 }
diff --git a/scripts/core/editor3/actions/toolbar.tsx b/scripts/core/editor3/actions/toolbar.tsx
index 2f2c477c18..2d879bf4a5 100644
--- a/scripts/core/editor3/actions/toolbar.tsx
+++ b/scripts/core/editor3/actions/toolbar.tsx
@@ -44,20 +44,14 @@ export function applyLink(link, entity = null) {
     };
 }
 
-/**
- * Returns the action for applying links to multi-line quote selections.
- */
-export function applyLinkToMuliLineQuote(link, entity = null) {
+export function applyLinkOnTableCell(link, entity = null) {
     return {
-        type: 'TOOLBAR_APPLY_LINK_MULTI-LINE_QUOTE',
+        type: 'TOOLBAR_APPLY_LINK_ON_TABLE_CELL',
         payload: {link, entity},
     };
 }
 
-/**
- * Returns the action for removing links from multi-line quote selections.
- */
-export const removeLinkFromMuliLineQuote = () => ({type: 'TOOLBAR_REMOVE_LINK_MULTI-LINE_QUOTE'});
+export const removeLinkInTableCell = () => ({type: 'TOOLBAR_REMOVE_LINK_IN_TABLE_CELL'});
 
 /**
  * @ngdoc method
@@ -192,10 +186,6 @@ export function toggleInvisibles() {
     return {type: 'TOOLBAR_TOGGLE_INVISIBLES'};
 }
 
-export const setMultiLineQuotePopup = (type, data) => ({
-    type: 'SET_MULTI-LINE_QUOTE_POPUP', payload: {type, data},
-});
-
-export const setCustomToolbar = (style: IEditorStore['customToolbarStyle']) => ({
-    type: 'SET_CUSTOM_TOOLBAR', payload: style,
+export const setTablePopup = (type, data) => ({
+    type: 'SET_TABLE_POPUP', payload: {type, data},
 });
diff --git a/scripts/core/editor3/components/BaseUnstyledComponent.tsx b/scripts/core/editor3/components/BaseUnstyledComponent.tsx
index 874fa21669..6345431b68 100644
--- a/scripts/core/editor3/components/BaseUnstyledComponent.tsx
+++ b/scripts/core/editor3/components/BaseUnstyledComponent.tsx
@@ -10,8 +10,7 @@ import {moveBlock, dragDrop, embed} from '../actions/editor3';
 import {getEmbedObject} from './embeds/EmbedInput';
 import {htmlComesFromDraftjsEditor} from 'core/editor3/helpers/htmlComesFromDraftjsEditor';
 import {htmlIsPlainTextDragged} from 'core/editor3/helpers/htmlIsPlainTextDragged';
-import {EDITOR_BLOCK_TYPE, MIME_TYPE_SUPERDESK_TEXT_ITEM} from '../constants';
-import {RICH_FORMATTING_OPTION} from 'superdesk-api';
+import {EDITOR_BLOCK_TYPE, formattingOptionsThatRequireDragAndDrop, MIME_TYPE_SUPERDESK_TEXT_ITEM} from '../constants';
 import {notify} from 'core/notify/notify';
 import {articleEmbedsConfigured} from './article-embed/can-add-article-embed';
 import {gettext} from 'core/utils';
@@ -45,15 +44,16 @@ function isHtmlTextAndShouldCreateEmbed(event, mediaType, editorProps): boolean
     return embedShouldBeCreated(html, editorProps);
 }
 
-export function dragEventShouldShowDropZone(event, editorProps: IPropsEditor3Component) {
+export function dragEventShouldShowDropZone(event, editorProps: IPropsEditor3Component): boolean {
     if (event.dataTransfer.types.includes(MIME_TYPE_SUPERDESK_TEXT_ITEM)) {
         return articleEmbedsConfigured(editorProps);
     }
 
-    const mediaFormattingOption: RICH_FORMATTING_OPTION = 'media';
     const intersection = EVENT_TYPES_TRIGGER_DROP_ZONE.filter((type) => event.dataTransfer.types.includes(type));
 
-    return editorProps.editorFormat.includes(mediaFormattingOption) && intersection.length > 0;
+    return editorProps.editorFormat.some(
+        (option) => formattingOptionsThatRequireDragAndDrop.has(option),
+    ) && intersection.length > 0;
 }
 
 interface IProps {
diff --git a/scripts/core/editor3/components/Editor3Component.tsx b/scripts/core/editor3/components/Editor3Component.tsx
index 173cbeb4b6..af220efef8 100644
--- a/scripts/core/editor3/components/Editor3Component.tsx
+++ b/scripts/core/editor3/components/Editor3Component.tsx
@@ -32,7 +32,7 @@ import {getSpellcheckWarningsByBlock} from './spellchecker/SpellcheckerDecorator
 import {getSpellchecker} from './spellchecker/default-spellcheckers';
 import {IEditorStore} from '../store';
 import {appConfig} from 'appConfig';
-import {EDITOR_BLOCK_TYPE, MIME_TYPE_SUPERDESK_TEXT_ITEM} from '../constants';
+import {EDITOR_BLOCK_TYPE, formattingOptionsThatRequireDragAndDrop, MIME_TYPE_SUPERDESK_TEXT_ITEM} from '../constants';
 import {IEditorComponentProps, RICH_FORMATTING_OPTION} from 'superdesk-api';
 import {preventInputWhenLimitIsPassed} from '../helpers/characters-limit';
 import {handleBeforeInputHighlights} from '../helpers/handleBeforeInputHighlights';
@@ -581,8 +581,9 @@ export class Editor3Component extends React.Component<IPropsEditor3Component, IS
          * add much performance overhead if it was replaced unconditionally, but I don't want to break it
          * nor spend time on testing so I'm keeping it as is for now.
          */
-        const dropAreaEnabled =
-            this.props.editorFormat.includes('media') || this.props.editorFormat.includes('embed articles');
+        const dropAreaEnabled = this.props.editorFormat.some(
+            (option) => formattingOptionsThatRequireDragAndDrop.has(option),
+        );
 
         const blockRenderMap = DefaultDraftBlockRenderMap.merge(Map(
             dropAreaEnabled ? {
@@ -634,19 +635,19 @@ export class Editor3Component extends React.Component<IPropsEditor3Component, IS
                 }
             >
                 {
-                    showToolbar && this.state.draggingInProgress !== true
-                        ? (
-                            <Toolbar
-                                uiTheme={this.props.uiTheme}
-                                disabled={locked || readOnly}
-                                scrollContainer={scrollContainer}
-                                editorNode={this.editorNode}
-                                highlightsManager={this.props.highlightsManager}
-                                editorWrapperElement={this.div}
-                            />
-                        )
-                        : null
+                    showToolbar && (
+                        <Toolbar
+                            uiTheme={this.props.uiTheme}
+                            disabled={locked || readOnly}
+                            scrollContainer={scrollContainer}
+                            editorNode={this.editorNode}
+                            highlightsManager={this.props.highlightsManager}
+                            editorWrapperElement={this.div}
+                            draggingInProgress={this.state.draggingInProgress}
+                        />
+                    )
                 }
+
                 <HighlightsPopup
                     editorNode={this.editorNode}
                     editorState={editorState}
diff --git a/scripts/core/editor3/components/article-embed/article-embed.tsx b/scripts/core/editor3/components/article-embed/article-embed.tsx
index ceea11cbd7..c64206559a 100644
--- a/scripts/core/editor3/components/article-embed/article-embed.tsx
+++ b/scripts/core/editor3/components/article-embed/article-embed.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {IconButton, Spacer} from 'superdesk-ui-framework/react';
-import {ContentBlock, ContentState, EditorState} from 'draft-js';
+import {ContentBlock, ContentState} from 'draft-js';
 import {IEditorDragDropArticleEmbed} from 'core/editor3/reducers/editor3';
 import {openArticle} from 'core/get-superdesk-api-implementation';
 import {Card} from 'core/ui/components/Card';
@@ -9,8 +9,6 @@ import {getArticleLabel, gettext} from 'core/utils';
 interface IProps {
     block: ContentBlock;
     contentState: ContentState;
-    editorState: EditorState;
-    readOnly: boolean;
 }
 
 export class ArticleEmbed extends React.Component<IProps> {
diff --git a/scripts/core/editor3/components/blockRenderer.tsx b/scripts/core/editor3/components/blockRenderer.tsx
index a2b95975f2..6b37c967e3 100644
--- a/scripts/core/editor3/components/blockRenderer.tsx
+++ b/scripts/core/editor3/components/blockRenderer.tsx
@@ -1,16 +1,24 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import {MediaBlock} from './media';
+import {MediaBlock} from './media/MediaBlock';
 import {EmbedBlock} from './embeds';
 import {TableBlock} from './tables/TableBlock';
-import {ContentBlock} from 'draft-js';
-import {DragableEditor3Block} from './media/dragable-editor3-block';
+import {ContentBlock, ContentState} from 'draft-js';
+import {DraggableEditor3Block} from './media/dragable-editor3-block';
 import {MultiLineQuote} from './multi-line-quote';
 import {CustomEditor3Entity} from '../constants';
 import {ArticleEmbed} from './article-embed/article-embed';
 import {IEditorStore} from '../store';
+import {CustomBlock} from './custom-block';
 
-const BlockRendererComponent: React.StatelessComponent<any> = (props) => {
+interface IProps {
+    contentState: ContentState;
+    block: ContentBlock;
+    blockProps: {
+        spellchecking: IEditorStore['spellchecking'];
+    };
+}
+
+const BlockRendererComponent: React.FunctionComponent<IProps> = (props) => {
     const {block, contentState} = props;
     const entityKey = block.getEntityAt(0);
     const spellchecking: IEditorStore['spellchecking'] | undefined | null = props.blockProps.spellchecking;
@@ -30,38 +38,52 @@ const BlockRendererComponent: React.StatelessComponent<any> = (props) => {
 
     function getComponent() {
         if (type === CustomEditor3Entity.MEDIA) {
-            return <MediaBlock {...props} />;
+            return (
+                <DraggableEditor3Block block={props.block}>
+                    <MediaBlock contentState={props.contentState} block={props.block} />
+                </DraggableEditor3Block>
+            );
         } else if (type === CustomEditor3Entity.EMBED) {
-            return <EmbedBlock {...props} />;
+            return (
+                <DraggableEditor3Block block={props.block}>
+                    <EmbedBlock contentState={props.contentState} block={props.block} />
+                </DraggableEditor3Block>
+            );
         } else if (type === CustomEditor3Entity.TABLE) {
             // Spellchecker is disabled for tables to avoid performance issues.
             // As it is currently implemented, it would send one spellchecking request for each table cell.
-            return <TableBlock {...props} toolbarStyle="table" spellchecking={disabledSpellcheckerConfig} />;
+            return (
+                <DraggableEditor3Block block={props.block}>
+                    <TableBlock
+                        block={props.block}
+                        spellchecking={disabledSpellcheckerConfig}
+                        additional={{tableKind: 'table'}}
+                    />
+                </DraggableEditor3Block>
+            );
         } else if (type === CustomEditor3Entity.MULTI_LINE_QUOTE) {
-            return <MultiLineQuote {...props} spellchecking={spellchecking} />;
+            return (
+                <DraggableEditor3Block block={props.block}>
+                    <MultiLineQuote block={props.block} spellchecking={spellchecking} />
+                </DraggableEditor3Block>
+            );
         } else if (type === CustomEditor3Entity.ARTICLE_EMBED) {
-            return <ArticleEmbed {...props} />;
+            return (
+                <DraggableEditor3Block block={props.block}>
+                    <ArticleEmbed contentState={props.contentState} block={props.block} />
+                </DraggableEditor3Block>
+            );
+        } else if (type === CustomEditor3Entity.CUSTOM_BLOCK) {
+            return (
+                // uses draggable wrapper inside the component
+                <CustomBlock contentState={props.contentState} block={props.block} spellchecking={spellchecking} />
+            );
         } else {
             return null;
         }
     }
 
-    const component = getComponent();
-
-    if (component == null) {
-        return null;
-    } else {
-        return (
-            <DragableEditor3Block block={block}>
-                {component}
-            </DragableEditor3Block>
-        );
-    }
-};
-
-BlockRendererComponent.propTypes = {
-    block: PropTypes.object.isRequired,
-    contentState: PropTypes.object.isRequired,
+    return getComponent();
 };
 
 export function getBlockRenderer(spellchecking: IEditorStore['spellchecking']) {
diff --git a/scripts/core/editor3/components/custom-block.scss b/scripts/core/editor3/components/custom-block.scss
new file mode 100644
index 0000000000..d734d3f750
--- /dev/null
+++ b/scripts/core/editor3/components/custom-block.scss
@@ -0,0 +1,46 @@
+.editor3-custom-block {
+    .table-block table td {
+        border: 1px solid var(--sd-editor-colour__controls-border)!important;
+    }
+
+    .table-inside table {
+        border: 0;
+    }
+}
+
+.editor3-custom-block--label-wrapper {
+    display: flex;
+}
+
+.editor3-custom-block--label {
+    font-size: 11px;
+    font-weight: 500;
+    color: var(--color-text);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    padding-block-start: 1px; // make text be vertically in the center of the bounding box
+}
+
+.editor3-custom-block--drag-handle {
+    --handle-width: 10px;
+    --handle-height: 14px;
+
+    display: flex;
+    padding: 4px 8px;
+    padding-inline-start: 4px; // less padding for drag handle
+    gap: 8px;
+    align-items: center;
+    cursor: grab;
+    border-start-start-radius: 2px;
+    border-start-end-radius: 2px;
+
+    background: var(--sd-editor-colour__controls-border);
+
+    &:hover {
+        background: gray;
+    }
+
+    &:active {
+        background:var(--sd-colour-primary);
+    }
+}
diff --git a/scripts/core/editor3/components/custom-block.tsx b/scripts/core/editor3/components/custom-block.tsx
new file mode 100644
index 0000000000..aa5805d7e2
--- /dev/null
+++ b/scripts/core/editor3/components/custom-block.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import {ContentBlock, ContentState} from 'draft-js';
+import {TableBlock} from './tables/TableBlock';
+import {IEditorStore} from 'core/editor3/store';
+import {DraggableEditor3BlockWithInlineHandle} from './media/dragable-editor3-block-with-labels';
+import {DragHandleDots} from 'superdesk-ui-framework/react';
+import {IEditor3CustomBlockData} from '../helpers/table';
+
+export const MULTI_LINE_QUOTE_CLASS = 'multi-line-quote';
+
+interface IProps {
+    block: ContentBlock;
+    contentState: ContentState;
+    spellchecking: IEditorStore['spellchecking'];
+}
+
+export class CustomBlock extends React.Component<IProps> {
+    render() {
+        const {block, contentState} = this.props;
+        const entityKey = block.getEntityAt(0);
+        const data: IEditor3CustomBlockData = contentState.getEntity(entityKey).getData().data;
+        const label = data.label;
+
+        return (
+            <DraggableEditor3BlockWithInlineHandle
+                block={block}
+                customDragHandle={() => {
+                    return (
+                        <span className="editor3-custom-block--label-wrapper" style={{display: 'flex'}}>
+                            <span className="editor3-custom-block--drag-handle">
+                                <div>
+                                    <DragHandleDots />
+                                </div>
+
+                                <span className="editor3-custom-block--label">{label}</span>
+                            </span>
+                        </span>
+                    );
+                }}
+                data-test-id="custom-block"
+            >
+                <div className="editor3-custom-block">
+                    <TableBlock
+                        fullWidth
+                        additional={{tableKind: 'custom-block', vocabularyId: data.vocabularyId}}
+                        block={this.props.block}
+                        spellchecking={this.props.spellchecking}
+                    />
+                </div>
+            </DraggableEditor3BlockWithInlineHandle>
+        );
+    }
+}
diff --git a/scripts/core/editor3/components/embeds/EmbedBlock.tsx b/scripts/core/editor3/components/embeds/EmbedBlock.tsx
index 791e440ec1..0490409913 100644
--- a/scripts/core/editor3/components/embeds/EmbedBlock.tsx
+++ b/scripts/core/editor3/components/embeds/EmbedBlock.tsx
@@ -4,23 +4,32 @@ import {QumuWidget, isQumuWidget} from './QumuWidget';
 import * as actions from '../../actions';
 import ng from 'core/services/ng';
 import {loadIframelyEmbedJs} from './loadIframely';
-import {debounce} from 'lodash';
+import {debounce, noop} from 'lodash';
 import {gettext} from 'core/utils';
 import {processEmbedCode} from '../../actions';
 import {ContentBlock, ContentState} from 'draft-js';
 import {connect} from 'react-redux';
+import {IEditorStore} from 'core/editor3/store';
 
 // debounce to avoid multiple widget load calls on initial load
 // when it gets executed for every embed block
 const loadIframely = debounce(loadIframelyEmbedJs, 100);
 
-interface IProps {
+interface IOwnProps {
     contentState: ContentState;
     block: ContentBlock;
+}
+
+interface IReduxStateProps {
     readOnly: boolean;
+}
+
+interface IDispatchProps {
     dispatch(action): void;
 }
 
+type IProps = IOwnProps & IReduxStateProps & IDispatchProps;
+
 /**
  * @ngdoc React
  * @module superdesk.core.editor3
@@ -195,8 +204,10 @@ export class EmbedBlockComponent extends React.Component<IProps> {
     }
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state: IEditorStore): IReduxStateProps => ({
     readOnly: state.readOnly,
 });
 
-export const EmbedBlock = connect(mapStateToProps)(EmbedBlockComponent);
+export const EmbedBlock: React.ComponentType<IOwnProps> = connect<IReduxStateProps, IOwnProps, IDispatchProps>(
+    mapStateToProps,
+)(EmbedBlockComponent);
diff --git a/scripts/core/editor3/components/links/LinkInput.tsx b/scripts/core/editor3/components/links/LinkInput.tsx
index 9ff94b2745..e8d1b319c0 100644
--- a/scripts/core/editor3/components/links/LinkInput.tsx
+++ b/scripts/core/editor3/components/links/LinkInput.tsx
@@ -9,7 +9,7 @@ import {
     hidePopups,
     createLinkSuggestion,
     changeLinkSuggestion,
-    applyLinkToMuliLineQuote,
+    applyLinkOnTableCell,
 } from '../../actions';
 import {connectPromiseResults} from 'core/helpers/ReactRenderAsync';
 import ng from 'core/services/ng';
@@ -17,6 +17,7 @@ import {gettext} from 'core/utils';
 import {IEditorStore} from 'core/editor3/store';
 import {IArticle} from 'superdesk-api';
 import {appConfig} from 'appConfig';
+import {noop} from 'lodash';
 
 /**
  * @ngdoc React
@@ -279,9 +280,9 @@ const mapStateToPropsNoEditorState = (state) => ({
     suggestingMode: state.suggestingMode,
 });
 
-export const LinkInputMultiLineQuote = connect(mapStateToPropsNoEditorState, {
-    applyLink: applyLinkToMuliLineQuote,
+export const LinkInputForTableCell = connect(mapStateToPropsNoEditorState, {
+    applyLink: applyLinkOnTableCell,
     hidePopups,
-    createLinkSuggestion,
-    changeLinkSuggestion,
+    createLinkSuggestion: noop, // not supported for tables
+    changeLinkSuggestion: noop, // not supported for tables
 })(LinkInputComponentWithDependenciesLoaded);
diff --git a/scripts/core/editor3/components/links/LinkToolbar.tsx b/scripts/core/editor3/components/links/LinkToolbar.tsx
index 99d40d2463..01d9ef4681 100644
--- a/scripts/core/editor3/components/links/LinkToolbar.tsx
+++ b/scripts/core/editor3/components/links/LinkToolbar.tsx
@@ -5,6 +5,7 @@ import * as actions from '../../actions';
 import {getSelectedEntityType, getSelectedEntityData} from '../links/entityUtils';
 import {gettext} from 'core/utils';
 import {IEditorStore} from 'core/editor3/store';
+import {noop} from 'lodash';
 
 interface IProps extends Partial<IEditorStore> {
     removeLink(): void;
@@ -69,9 +70,9 @@ const mapDispatchToProps = (dispatch) => ({
     removeLinkSuggestion: () => dispatch(actions.removeLinkSuggestion()),
 });
 
-const mapDispatchToPropsMultiLineQuote = (dispatch) => ({
-    removeLink: () => dispatch(actions.removeLinkFromMuliLineQuote()),
-    removeLinkSuggestion: () => dispatch(actions.removeLinkSuggestion()),
+const mapDispatchToPropsTableCell = (dispatch) => ({
+    removeLink: () => dispatch(actions.removeLinkInTableCell()),
+    removeLinkSuggestion: () => noop, // not supported for tables
 });
 
 export const LinkToolbar = connect(
@@ -79,7 +80,7 @@ export const LinkToolbar = connect(
     mapDispatchToProps,
 )(LinkToolbarComponent);
 
-export const LinkToolbarMultiLineQuote = connect(
+export const LinkToolbarForTableCell = connect(
     mapStateToProps,
-    mapDispatchToPropsMultiLineQuote,
+    mapDispatchToPropsTableCell,
 )(LinkToolbarComponent);
diff --git a/scripts/core/editor3/components/media/MediaBlock.tsx b/scripts/core/editor3/components/media/MediaBlock.tsx
index 37d0897aee..91fb63b74c 100644
--- a/scripts/core/editor3/components/media/MediaBlock.tsx
+++ b/scripts/core/editor3/components/media/MediaBlock.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import Textarea from 'react-textarea-autosize';
 import {gettext} from 'core/utils';
@@ -7,6 +6,7 @@ import {VideoComponent} from 'core/ui/components/video';
 import {isMediaEditable} from 'core/config';
 import * as actions from '../../actions';
 import {PlainTextEditor} from 'core/ui/components';
+import {ContentBlock, ContentState} from 'draft-js';
 
 function getTranslationForAssignRights(value) {
     if (value === 'single-usage') {
@@ -22,6 +22,27 @@ function getTranslationForAssignRights(value) {
     }
 }
 
+type ICaptionField = 'description_text' | 'headline';
+
+interface IOwnProps {
+    block: ContentBlock;
+    contentState: ContentState;
+}
+
+interface IReduxStateProps {
+    readOnly: boolean;
+    showTitle: boolean;
+}
+
+interface IDispatchProps {
+    cropImage(entityKey: string, entityData: any, options: {isNew: any; showMetadata: any; defaultTab: any;}): void;
+    removeBlock(blockKey: string): void;
+    changeCaption(entityKey: string, newCaption: string, field: ICaptionField): void;
+    setLocked(): void;
+}
+
+type IProps = IOwnProps & IReduxStateProps & IDispatchProps;
+
 /**
  * @ngdoc React
  * @module superdesk.core.editor3
@@ -30,7 +51,7 @@ function getTranslationForAssignRights(value) {
  * @param {Object} block Information about the block where this component renders.
  * @description This component renders an image block within the editor.
  */
-export class MediaBlockComponent extends React.Component<any, any> {
+export class MediaBlockComponent extends React.Component<IProps> {
     static propTypes: any;
     static defaultProps: any;
 
@@ -96,7 +117,7 @@ export class MediaBlockComponent extends React.Component<any, any> {
      * @name MediaBlockComponent#onChange
      * @description Triggered (debounced) when the image caption input is edited.
      */
-    onChange(value: string, field: 'description_text' | 'headline') {
+    onChange(value: string, field: ICaptionField) {
         const {block, changeCaption} = this.props;
         const entityKey = block.getEntityAt(0);
 
@@ -318,18 +339,6 @@ export class MediaBlockComponent extends React.Component<any, any> {
     }
 }
 
-MediaBlockComponent.propTypes = {
-    cropImage: PropTypes.func.isRequired,
-    removeBlock: PropTypes.func.isRequired,
-    changeCaption: PropTypes.func.isRequired,
-    setLocked: PropTypes.func.isRequired,
-    block: PropTypes.object.isRequired,
-    contentState: PropTypes.object.isRequired,
-    showTitle: PropTypes.bool,
-    readOnly: PropTypes.bool,
-    blockProps: PropTypes.object,
-};
-
 const mapStateToProps = (state) => ({
     readOnly: state.readOnly,
     showTitle: state.showTitle,
@@ -342,7 +351,7 @@ const mapDispatchToProps = (dispatch) => ({
     setLocked: () => dispatch(actions.setLocked(true)),
 });
 
-export const MediaBlock = connect(
+export const MediaBlock: React.ComponentType<IOwnProps> = connect(
     mapStateToProps,
     mapDispatchToProps,
 )(MediaBlockComponent);
diff --git a/scripts/core/editor3/components/media/dragable-editor3-block-with-labels.tsx b/scripts/core/editor3/components/media/dragable-editor3-block-with-labels.tsx
new file mode 100644
index 0000000000..2580f5d054
--- /dev/null
+++ b/scripts/core/editor3/components/media/dragable-editor3-block-with-labels.tsx
@@ -0,0 +1,72 @@
+import React from 'react';
+import {ContentBlock} from 'draft-js';
+import {connect} from 'react-redux';
+import {DragHandle} from 'superdesk-ui-framework/react';
+import {EDITOR_BLOCK_TYPE} from 'core/editor3/constants';
+
+interface IState {
+    // Dragging is enabled only when mouse cursor is inside drag handle.
+    // It can't always be enabled because attempting to select text outside of drag handle would initiate dragging.
+    draggingEnabled: boolean;
+}
+
+interface IProps {
+    block: ContentBlock;
+    readOnly?: boolean; // connected
+    children: React.ReactNode;
+    customDragHandle?: React.ComponentType;
+    'data-test-id'?: string;
+}
+
+class DraggableEditor3BlockComponentWithInlineHandle extends React.PureComponent<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            draggingEnabled: false,
+        };
+    }
+
+    render() {
+        const CustomDragHandle = this.props.customDragHandle;
+
+        return (
+            <div
+                draggable={this.state.draggingEnabled && this.props.readOnly !== true}
+                onDragStart={(e) => {
+                    e.dataTransfer.setData(EDITOR_BLOCK_TYPE, this.props.block.getKey());
+                }}
+                data-test-id={this.props['data-test-id']}
+            >
+                <div
+                    onMouseEnter={() => {
+                        this.setState({
+                            draggingEnabled: true,
+                        });
+                    }}
+                    onMouseLeave={() => {
+                        this.setState({
+                            draggingEnabled: false,
+                        });
+                    }}
+                >
+                    {
+                        this.props.customDragHandle != null
+                            ? <CustomDragHandle />
+                            : <DragHandle />
+                    }
+                </div>
+
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = (state) => ({
+    readOnly: state.readOnly,
+});
+
+export const DraggableEditor3BlockWithInlineHandle = connect(
+    mapStateToProps,
+)(DraggableEditor3BlockComponentWithInlineHandle);
diff --git a/scripts/core/editor3/components/media/dragable-editor3-block.tsx b/scripts/core/editor3/components/media/dragable-editor3-block.tsx
index ac5b2fe3cd..0775db7347 100644
--- a/scripts/core/editor3/components/media/dragable-editor3-block.tsx
+++ b/scripts/core/editor3/components/media/dragable-editor3-block.tsx
@@ -14,7 +14,7 @@ interface IState {
     displayHandle: boolean;
 }
 
-class DragableEditor3BlockComponent extends React.PureComponent<IProps, IState> {
+class DraggableEditor3BlockComponent extends React.PureComponent<IProps, IState> {
     timeoutId: number;
     constructor(props: IProps) {
         super(props);
@@ -84,6 +84,6 @@ const mapStateToProps = (state) => ({
     readOnly: state.readOnly,
 });
 
-export const DragableEditor3Block = connect(
+export const DraggableEditor3Block = connect(
     mapStateToProps,
-)(DragableEditor3BlockComponent);
+)(DraggableEditor3BlockComponent);
diff --git a/scripts/core/editor3/components/media/index.ts b/scripts/core/editor3/components/media/index.ts
deleted file mode 100644
index 34d567a014..0000000000
--- a/scripts/core/editor3/components/media/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export {MediaBlock} from './MediaBlock';
diff --git a/scripts/core/editor3/components/multi-line-quote/MultiLineQuote.tsx b/scripts/core/editor3/components/multi-line-quote/MultiLineQuote.tsx
index 9da79e4872..ce4244377d 100644
--- a/scripts/core/editor3/components/multi-line-quote/MultiLineQuote.tsx
+++ b/scripts/core/editor3/components/multi-line-quote/MultiLineQuote.tsx
@@ -1,58 +1,28 @@
 import React from 'react';
-import * as actions from '../../actions';
-import {connect} from 'react-redux';
-import {EditorState, ContentBlock} from 'draft-js';
+import {ContentBlock} from 'draft-js';
 import {TableBlock} from '../tables/TableBlock';
-import {IActiveCell} from 'superdesk-api';
 import {IEditorStore} from 'core/editor3/store';
 
 export const MULTI_LINE_QUOTE_CLASS = 'multi-line-quote';
 
 interface IProps {
     block: ContentBlock;
-    readOnly: boolean;
-    editorState: EditorState;
     spellchecking: IEditorStore['spellchecking'];
-    parentOnChange: (newEditorState: EditorState, force: boolean) => void;
-    activeCell?: IActiveCell;
-    setActiveCell: (row: number, col: number, blockKey: string, currentStyle: Array<string>, selection: any) => void;
 }
 
 /**
  * Supports quotes that may contain multiple blocks including headings.
  */
-export class MultiLineQuoteComponent extends React.Component<IProps> {
-    static propTypes: any;
-    static defaultProps: any;
-
+export class MultiLineQuote extends React.Component<IProps> {
     render() {
         return (
             <TableBlock
                 fullWidth
                 className={MULTI_LINE_QUOTE_CLASS}
-                toolbarStyle="multiLineQuote"
+                additional={{tableKind: 'multi-line-quote'}}
                 block={this.props.block}
-                readOnly={this.props.readOnly}
-                activeCell={this.props.activeCell}
-                editorState={this.props.editorState}
-                setActiveCell={this.props.setActiveCell}
-                parentOnChange={this.props.parentOnChange}
                 spellchecking={this.props.spellchecking}
             />
         );
     }
 }
-
-const mapDispatchToProps = (dispatch) => ({
-    parentOnChange: (editorState, force) => dispatch(actions.changeEditorState(editorState, force)),
-});
-
-const mapStateToProps = (state) => ({
-    editorState: state.editorState,
-    readOnly: state.readOnly,
-});
-
-export const MultiLineQuote = connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(MultiLineQuoteComponent);
diff --git a/scripts/core/editor3/components/tables/TableBlock.tsx b/scripts/core/editor3/components/tables/TableBlock.tsx
index 8fc8599cfe..339837a32d 100644
--- a/scripts/core/editor3/components/tables/TableBlock.tsx
+++ b/scripts/core/editor3/components/tables/TableBlock.tsx
@@ -5,29 +5,60 @@ import {connect} from 'react-redux';
 import {TableCell} from './TableCell';
 import {EditorState, SelectionState, ContentBlock} from 'draft-js';
 import {getCell, setCell, getData, setData} from '../../helpers/table';
-import {IActiveCell, ISetActiveCellReturnType} from 'superdesk-api';
 import {IEditorStore} from 'core/editor3/store';
 
-interface IProps {
-    block: ContentBlock;
-    readOnly: boolean;
-    spellchecking: IEditorStore['spellchecking'];
+export type ITableKind = 'table' | 'multi-line-quote' | 'custom-block';
+
+export interface IActiveCellTable {
+    tableKind: 'table';
+}
+
+export interface IActiveCellMultiLineQuote {
+    tableKind: 'multi-line-quote';
+}
+
+export interface IActiveCellCustomBlock {
+    tableKind: 'custom-block';
+    vocabularyId: string;
+}
+
+export type IActiveCellAdditional = IActiveCellTable | IActiveCellMultiLineQuote | IActiveCellCustomBlock;
+
+export interface IActiveCell {
+    i: number; // row
+    j: number; // column
+    key: string;
+    currentStyle: Array<string>;
+    selection: import('draft-js').SelectionState;
+    additional: IActiveCellAdditional;
+}
+
+export interface ISetActiveCellReturnType {
+    type: 'EDITOR_SET_CELL';
+    payload: IActiveCell;
+}
+
+interface IReduxStateProps {
     editorState: EditorState;
     activeCell?: IActiveCell;
-    setActiveCell: (
-        row: number,
-        col: number,
-        blockKey: string,
-        currentStyle: Array<string>,
-        selection: any,
-    ) => ISetActiveCellReturnType;
+    readOnly: IEditorStore['readOnly'];
+}
+
+interface IDispatchProps {
+    setActiveCell: (activeCell: IActiveCell) => ISetActiveCellReturnType;
     parentOnChange: (newEditorState: EditorState, force: boolean) => void;
-    setCustomToolbar?(toolbarStyle: IEditorStore['customToolbarStyle']): void;
-    toolbarStyle?: IEditorStore['customToolbarStyle'];
+}
+
+interface IOwnProps {
+    block: ContentBlock;
+    spellchecking: IEditorStore['spellchecking'];
+    additional: IActiveCellAdditional;
     className?: string;
     fullWidth?: boolean;
 }
 
+type IProps = IOwnProps & IReduxStateProps & IDispatchProps;
+
 /**
  * @ngdoc React
  * @module superdesk.core.editor3
@@ -71,15 +102,16 @@ export class TableBlockComponent extends React.Component<IProps> {
             parentOnChange(newEditorState, forceUpdate);
         }
 
-        // Take the latest activeCell data in order to accurately set the customToolbarStyle.
-        // The data coming from this.props.activeCell is the previous state of the activeCell
-        const updatedActiveCell = setActiveCell(row, col, block.getKey(), currentStyle, selection.toJS());
+        const cell: IActiveCell = {
+            i: row,
+            j: col,
+            key: block.getKey(),
+            currentStyle: currentStyle,
+            selection: selection.toJS(),
+            additional: this.props.additional,
+        };
 
-        if (updatedActiveCell.payload != null) {
-            this.props.setCustomToolbar(this.props.toolbarStyle);
-        } else {
-            this.props.setCustomToolbar(undefined);
-        }
+        setActiveCell(cell);
     }
 
     getCellEditorState(data, i, j): EditorState {
@@ -104,7 +136,16 @@ export class TableBlockComponent extends React.Component<IProps> {
         const {setActiveCell, block} = this.props;
         const newSelection = selection.merge({hasFocus: true});
 
-        setActiveCell(i, j, block.getKey(), currentStyle, newSelection.toJS());
+        const cell: IActiveCell = {
+            i: i,
+            j: j,
+            key: block.getKey(),
+            currentStyle: currentStyle,
+            selection: newSelection.toJS(),
+            additional: this.props.additional,
+        };
+
+        setActiveCell(cell);
     }
 
     // onMouseDown is used in the main editor to set focus and stop table editing
@@ -128,7 +169,17 @@ export class TableBlockComponent extends React.Component<IProps> {
         }
 
         parentOnChange(newEditorState, false);
-        setActiveCell(activeCell.i, activeCell.j, block.getKey(), currentStyle, selection);
+
+        const cell: IActiveCell = {
+            i: activeCell.i,
+            j: activeCell.j,
+            key: block.getKey(),
+            currentStyle: currentStyle,
+            selection: selection,
+            additional: this.props.additional,
+        };
+
+        setActiveCell(cell);
     }
 
     onUndo() {
@@ -190,10 +241,9 @@ export class TableBlockComponent extends React.Component<IProps> {
 
 const mapDispatchToProps = (dispatch) => ({
     parentOnChange: (editorState, force) => dispatch(actions.changeEditorState(editorState, force)),
-    setActiveCell: (i, j, key, currentStyle, selection) => dispatch(
-        actions.setActiveCell(i, j, key, currentStyle, selection),
+    setActiveCell: (activeCell: IActiveCell) => dispatch(
+        actions.setActiveCell(activeCell),
     ),
-    setCustomToolbar: (val: IEditorStore['customToolbarStyle']) => dispatch(actions.setCustomToolbar(val)),
 });
 
 const mapStateToProps = (state) => ({
@@ -202,7 +252,7 @@ const mapStateToProps = (state) => ({
     activeCell: state.activeCell,
 });
 
-export const TableBlock = connect(
+export const TableBlock: React.ComponentType<IOwnProps> = connect<IReduxStateProps, IDispatchProps, IOwnProps>(
     mapStateToProps,
     mapDispatchToProps,
 )(TableBlockComponent);
diff --git a/scripts/core/editor3/components/tests/editor3.spec.tsx b/scripts/core/editor3/components/tests/editor3.spec.tsx
index e1f284778a..a58b7211c6 100644
--- a/scripts/core/editor3/components/tests/editor3.spec.tsx
+++ b/scripts/core/editor3/components/tests/editor3.spec.tsx
@@ -171,7 +171,7 @@ describe('editor3.blockRenderer', () => {
 
     it('should return null as component for unrecognised blocks', () => {
         const block = {getType: () => 'atomic', getEntityAt: () => 'entity_key'} as unknown as ContentBlock;
-        const contentState = {getEntity: () => ({getType: () => 'not an image'})};
+        const contentState: any = {getEntity: () => ({getType: () => 'not an image'})};
         const {component, editable} = blockRenderer(block);
 
         expect(component({block, contentState, blockProps: {spellchecking}})).toBe(null);
@@ -180,7 +180,7 @@ describe('editor3.blockRenderer', () => {
 
     it('should return non-null as component for recognised blocks', () => {
         const block = {getType: () => 'atomic', getEntityAt: () => 'entity_key'} as unknown as ContentBlock;
-        const contentState = {getEntity: () => ({
+        const contentState: any = {getEntity: () => ({
             getType: () => CustomEditor3Entity.EMBED,
             getData: () => ({data: {html: 'abc'}}),
         })};
@@ -193,6 +193,6 @@ describe('editor3.blockRenderer', () => {
             mount(<Provider store={store}>{component}</Provider>)
                 .childAt(0)
                 .name(),
-        ).toBe('Connect(DragableEditor3BlockComponent)');
+        ).toBe('Connect(DraggableEditor3BlockComponent)');
     });
 });
diff --git a/scripts/core/editor3/components/tests/embeds.spec.tsx b/scripts/core/editor3/components/tests/embeds.spec.tsx
index 27685dcd26..727887f385 100644
--- a/scripts/core/editor3/components/tests/embeds.spec.tsx
+++ b/scripts/core/editor3/components/tests/embeds.spec.tsx
@@ -10,14 +10,12 @@ import {createStore} from 'redux';
 
 describe('editor3.components.embed-block', () => {
     it('should render entity html', () => {
-        const noop = () => ({});
         const {block, contentState} = embedBlockAndContent();
         const wrapper = mount(
             <Provider store={createStore(() => ({}), {})}>
                 <EmbedBlock
                     block={block}
                     contentState={contentState}
-                    blockProps={{readOnly: false, dispatch: noop}}
                 />
             </Provider>,
         );
diff --git a/scripts/core/editor3/components/tests/media.spec.tsx b/scripts/core/editor3/components/tests/media.spec.tsx
index 616b9bd0a3..f5e295a629 100644
--- a/scripts/core/editor3/components/tests/media.spec.tsx
+++ b/scripts/core/editor3/components/tests/media.spec.tsx
@@ -3,6 +3,7 @@ import {shallow, mount} from 'enzyme';
 import {MediaBlockComponent as MediaBlock} from '../media/MediaBlock';
 import {imageBlockAndContent} from './utils';
 import {PlainTextEditor} from 'core/ui/components';
+import {noop} from 'lodash';
 
 describe('editor3.components.media-block', () => {
     it('should render', () => {
@@ -14,6 +15,9 @@ describe('editor3.components.media-block', () => {
                 setLocked={() => ({})}
                 block={block}
                 contentState={contentState}
+                readOnly={false}
+                showTitle={false}
+                removeBlock={noop}
             />,
         );
 
@@ -32,6 +36,9 @@ describe('editor3.components.media-block', () => {
                 setLocked={() => ({})}
                 block={block}
                 contentState={contentState}
+                readOnly={false}
+                showTitle={false}
+                removeBlock={noop}
             />,
         );
 
diff --git a/scripts/core/editor3/components/tests/tables.spec.tsx b/scripts/core/editor3/components/tests/tables.spec.tsx
index 7225a0f2c6..0639836f61 100644
--- a/scripts/core/editor3/components/tests/tables.spec.tsx
+++ b/scripts/core/editor3/components/tests/tables.spec.tsx
@@ -25,6 +25,7 @@ describe('editor3.component.table-block', () => {
         const {block, contentState} = tableBlockAndContent();
         const wrapper = shallow(
             <TableBlock
+                additional={{tableKind: 'table'}}
                 block={block}
                 setActiveCell={() => null}
                 editorState={EditorState.createWithContent(contentState)}
@@ -42,6 +43,7 @@ describe('editor3.component.table-block', () => {
         const {block, contentState} = tableBlockAndContent();
         const wrapper = mount(
             <TableBlock
+                additional={{tableKind: 'table'}}
                 block={block}
                 setActiveCell={() => null}
                 editorState={EditorState.createWithContent(contentState)}
diff --git a/scripts/core/editor3/components/toolbar/MultiLineQuoteControls.tsx b/scripts/core/editor3/components/toolbar/MultiLineQuoteControls.tsx
deleted file mode 100644
index 8b824c3405..0000000000
--- a/scripts/core/editor3/components/toolbar/MultiLineQuoteControls.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import StyleButton from './StyleButton';
-import * as actions from '../../actions';
-import {inlineStyles} from '../../helpers/inlineStyles';
-import {getData, getCell} from '../../helpers/table';
-import {SelectionButtonCustomEditorState} from './SelectionButton';
-import {PopupTypes} from '../../actions';
-import {gettext} from 'core/utils';
-import {IEditorStore} from 'core/editor3/store';
-import {blockStyles} from './BlockStyleButtons';
-import {EditorState} from 'draft-js';
-import {LinkInputMultiLineQuote} from '../links/LinkInput';
-import {LinkToolbarMultiLineQuote} from '../links/LinkToolbar';
-
-interface IProps extends Partial<IEditorStore> {
-    className: string;
-    toggleTableStyle(): void;
-    toggleMultiLineQuoteBlockStyle(style: string): void;
-    setMultiLineQuotePopup(popupType: string, payload: any): void;
-    popup: any;
-}
-
-/**
- * Holds the logic for multi-line quote toolbar operations.
- */
-const MultiLineQuoteControlsComponent: React.FunctionComponent<IProps> = ({
-    activeCell,
-    editorState,
-    editorFormat,
-    toggleTableStyle,
-    className,
-    setMultiLineQuotePopup,
-    toggleMultiLineQuoteBlockStyle,
-    popup,
-}) => {
-    const {i, j, key, currentStyle, selection} = activeCell;
-    const contentState = editorState.getCurrentContent();
-    const data = getData(contentState, key);
-    const cellEditorState: EditorState = getCell(data, i, j, currentStyle, selection);
-    const currentInlineStyle = cellEditorState.getCurrentInlineStyle();
-    const blockStyle = cellEditorState
-        .getCurrentContent()
-        .getBlockForKey(cellEditorState.getSelection().getStartKey())
-        .getType();
-
-    return (
-        <div className={'table-controls ' + className}>
-            {
-                editorFormat
-                    .filter((type) => type in blockStyles && type !== 'quote')
-                    .sort()
-                    .map((type) => (
-                        <StyleButton
-                            key={type}
-                            active={blockStyles[type] === blockStyle}
-                            label={type}
-                            onToggle={() => toggleMultiLineQuoteBlockStyle(blockStyles[type])}
-                            style={blockStyles[type]}
-                        />
-                    ))
-            }
-
-            {
-                editorFormat
-                    .filter((type) => type in inlineStyles)
-                    .map((type) => (
-                        <StyleButton
-                            key={type}
-                            active={currentInlineStyle.has(inlineStyles[type])}
-                            label={type}
-                            onToggle={toggleTableStyle}
-                            style={inlineStyles[type]}
-                        />
-                    ))
-            }
-
-            {
-                editorFormat.includes('link') && (
-                    <SelectionButtonCustomEditorState
-                        editorState={cellEditorState}
-                        onClick={(payload) => setMultiLineQuotePopup(PopupTypes.Link, payload)}
-                        iconName="link"
-                        tooltip={gettext('Link')}
-                    />
-                )
-            }
-
-            {
-                popup.type === PopupTypes.Link && (
-                    <LinkInputMultiLineQuote
-                        data={popup.data}
-                        editorState={cellEditorState}
-                    />
-                )
-            }
-
-            <LinkToolbarMultiLineQuote
-                editorState={cellEditorState}
-                onEdit={(payload) => setMultiLineQuotePopup(PopupTypes.Link, payload)}
-            />
-        </div>
-    );
-};
-
-const mapDispatchToProps = (dispatch) => ({
-    toggleTableStyle: (inlineStyle) => dispatch(actions.toggleTableStyle(inlineStyle)),
-    toggleMultiLineQuoteBlockStyle: (style: string) => dispatch(actions.toggleMultiLineQuoteBlockStyle(style)),
-    setMultiLineQuotePopup: (type, data) => dispatch(actions.setMultiLineQuotePopup(type, data)),
-});
-
-const mapStateToProps = ({
-    activeCell,
-    editorState,
-    editorFormat,
-    popup,
-}) => ({
-    activeCell,
-    editorState,
-    editorFormat,
-    popup,
-});
-
-export const MultiLineQuoteControls = connect(mapStateToProps, mapDispatchToProps)(MultiLineQuoteControlsComponent);
diff --git a/scripts/core/editor3/components/toolbar/StyleButton.tsx b/scripts/core/editor3/components/toolbar/StyleButton.tsx
index 992ca9d770..7dbab4ce0b 100644
--- a/scripts/core/editor3/components/toolbar/StyleButton.tsx
+++ b/scripts/core/editor3/components/toolbar/StyleButton.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import {gettext} from 'core/utils';
 import {IEditorComponentProps} from 'superdesk-api';
+import {getEditor3RichTextFormattingOptions} from 'apps/workspace/content/components/get-content-profiles-form-config';
 
 interface IPropsStyleButton {
     onToggle?(style: string, active: boolean): void;
@@ -91,7 +92,16 @@ export default class StyleButton extends React.Component<IPropsStyleButton> {
                 onMouseDown={this.onToggle}
                 style={this.props.uiTheme == null ? undefined : {color: this.props.uiTheme.textColor}}
             >
-                {iconClass ? <i className={iconClass} /> : <b>{label}</b>}
+                {iconClass
+                    ? (
+                        <i
+                            data-test-id="formatting-option"
+                            data-test-value={getEditor3RichTextFormattingOptions()[label]}
+                            className={iconClass}
+                        />
+                    )
+                    : <b>{label}</b>
+                }
             </span>
         );
     }
diff --git a/scripts/core/editor3/components/toolbar/TableControls.tsx b/scripts/core/editor3/components/toolbar/TableControls.tsx
index bdfe34346f..ff2251f7cf 100644
--- a/scripts/core/editor3/components/toolbar/TableControls.tsx
+++ b/scripts/core/editor3/components/toolbar/TableControls.tsx
@@ -1,116 +1,188 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import StyleButton from './StyleButton';
 import * as actions from '../../actions';
 import {inlineStyles} from '../../helpers/inlineStyles';
 import {getData, getCell} from '../../helpers/table';
+import {ITableKind} from '../tables/TableBlock';
+import {RICH_FORMATTING_OPTION} from 'superdesk-api';
+import {blockStyles} from './BlockStyleButtons';
+import {SelectionButtonCustomEditorState} from './SelectionButton';
+import {gettext} from 'core/utils';
+import {LinkToolbarForTableCell} from '../links/LinkToolbar';
+import {PopupTypes} from '../../actions';
+import {LinkInputForTableCell} from '../links/LinkInput';
+import {IEditorStore} from 'core/editor3/store';
+
+interface IOwnProps {
+    className: string;
+    tableKind: ITableKind;
+    editorFormat: Array<RICH_FORMATTING_OPTION>;
+}
+
+interface IDispatchProps {
+    addRowAfter(): void;
+    addColAfter(): void;
+    removeRow(): void;
+    removeCol(): void;
+    toggleTableHead(): void;
+    toggleTableStyle(inlineStyle: any): void;
+    toggleTableBlockType(type:any): void;
+    setTablePopup(type:any, data: any): void;
+}
+
+interface IReduxStateProps {
+    activeCell: IEditorStore['activeCell'];
+    editorState: IEditorStore['editorState'];
+    popup: IEditorStore['popup'];
+}
+
+type IProps = IOwnProps & IReduxStateProps & IDispatchProps;
+
+const TableControlsComponent: React.FunctionComponent<IProps> = (props) => {
+    const {
+        addRowAfter,
+        addColAfter,
+        removeRow,
+        removeCol,
+        activeCell,
+        popup,
+        editorState,
+        editorFormat,
+        toggleTableHead,
+        toggleTableStyle,
+        toggleTableBlockType,
+        setTablePopup,
+        className,
+        tableKind,
+    } = props;
 
-/**
- * @ngdoc React
- * @module superdesk.core.editor3
- * @name TableControlsComponent
- * @param {Function} addRowAfter
- * @param {Function} addColAfter
- * @param {Function} removeRow
- * @param {Function} removeCol
- * @description Holds the toolbar for table operations.
- */
-const TableControlsComponent: React.StatelessComponent<any> = ({
-    addRowAfter,
-    addColAfter,
-    removeRow,
-    removeCol,
-    activeCell,
-    editorState,
-    editorFormat,
-    toggleTableHead,
-    toggleTableStyle,
-    className,
-}) => {
     const {i, j, key, currentStyle, selection} = activeCell;
     const contentState = editorState.getCurrentContent();
     const data = getData(contentState, key);
     const {withHeader} = data;
     const cellEditorState = getCell(data, i, j, currentStyle, selection);
     const currentInlineStyle = cellEditorState.getCurrentInlineStyle();
+    const blockStyle = cellEditorState
+        .getCurrentContent()
+        .getBlockForKey(cellEditorState.getSelection().getStartKey())
+        .getType();
 
     return (
-        <div className={'table-controls ' + className}>
-            <StyleButton active={withHeader} label={'TH'} onToggle={toggleTableHead} />
-
-            <span
-                className="Editor3-styleButton Editor3-styleButton--short"
-                onClick={removeRow}
-            >
-                <i className="icon-minus-sign" />
-            </span>
-
-            <span
-                className="Editor3-styleButton"
-                onClick={addRowAfter}
-            >
-                <i className="icon-plus-sign" />
-                {' '}row
-            </span>
-
-            <span
-                className="Editor3-styleButton Editor3-styleButton--short"
-                onClick={removeCol}
-            >
-                <i className="icon-minus-sign" />
-            </span>
-
-            <span className="Editor3-styleButton" onClick={addColAfter}>
-                <i className="icon-plus-sign" />
-                {' '}col
-            </span>
+        <div className={'table-controls ' + className} data-test-id="toolbar">
+            {
+                tableKind === 'table' && (
+                    <>
+                        <StyleButton active={withHeader} label={'TH'} onToggle={toggleTableHead} />
+
+                        <span
+                            className="Editor3-styleButton Editor3-styleButton--short"
+                            onClick={removeRow}
+                        >
+                            <i className="icon-minus-sign" />
+                        </span>
+
+                        <span
+                            className="Editor3-styleButton"
+                            onClick={addRowAfter}
+                        >
+                            <i className="icon-plus-sign" />
+                            {' '}{gettext('row')}
+                        </span>
+
+                        <span
+                            className="Editor3-styleButton Editor3-styleButton--short"
+                            onClick={removeCol}
+                        >
+                            <i className="icon-minus-sign" />
+                        </span>
+
+                        <span className="Editor3-styleButton" onClick={addColAfter}>
+                            <i className="icon-plus-sign" />
+                            {' '}{gettext('column')}
+                        </span>
+                    </>
+                )
+            }
 
             {
-                editorFormat
-                    .filter((type) => type in inlineStyles)
-                    .map((type) => (
-                        <StyleButton
-                            key={type}
-                            active={currentInlineStyle.has(inlineStyles[type])}
-                            label={type}
-                            onToggle={toggleTableStyle}
-                            style={inlineStyles[type]}
-                        />
-                    ))
+                editorFormat.map((type) => {
+                    if (type === 'link') {
+                        return (
+                            <>
+                                {
+                                    editorFormat.includes('link') && (
+                                        <SelectionButtonCustomEditorState
+                                            editorState={cellEditorState}
+                                            onClick={(payload) => setTablePopup(PopupTypes.Link, payload)}
+                                            iconName="link"
+                                            tooltip={gettext('Link')}
+                                        />
+                                    )
+                                }
+
+                                {
+                                    popup.type === PopupTypes.Link && (
+                                        <LinkInputForTableCell
+                                            data={popup.data}
+                                            editorState={cellEditorState}
+                                        />
+                                    )
+                                }
+
+                                <LinkToolbarForTableCell
+                                    editorState={cellEditorState}
+                                    onEdit={(payload) => setTablePopup(PopupTypes.Link, payload)}
+                                />
+                            </>
+                        );
+                    } else if (type in inlineStyles) {
+                        return (
+                            <StyleButton
+                                key={type}
+                                active={currentInlineStyle.has(inlineStyles[type])}
+                                label={type}
+                                onToggle={toggleTableStyle}
+                                style={inlineStyles[type]}
+                            />
+                        );
+                    } else if (type in blockStyles) {
+                        return (
+                            <StyleButton
+                                key={type}
+                                active={blockStyles[type] === blockStyle}
+                                label={type}
+                                onToggle={() => toggleTableBlockType(blockStyles[type])}
+                                style={blockStyles[type]}
+                            />
+                        );
+                    } else {
+                        return null;
+                    }
+                })
             }
         </div>
     );
 };
 
-TableControlsComponent.propTypes = {
-    addRowAfter: PropTypes.func,
-    addColAfter: PropTypes.func,
-    removeRow: PropTypes.func,
-    removeCol: PropTypes.func,
-    activeCell: PropTypes.object.isRequired,
-    editorState: PropTypes.object,
-    editorFormat: PropTypes.array,
-    toggleTableHead: PropTypes.func,
-    toggleTableStyle: PropTypes.func,
-    className: PropTypes.string,
-};
-
-const mapDispatchToProps = (dispatch) => ({
+const mapDispatchToProps = (dispatch): IDispatchProps => ({
     addRowAfter: () => dispatch(actions.addRowAfter()),
     addColAfter: () => dispatch(actions.addColAfter()),
     removeRow: () => dispatch(actions.removeRow()),
     removeCol: () => dispatch(actions.removeCol()),
     toggleTableHead: () => dispatch(actions.toggleTableHeader()),
     toggleTableStyle: (inlineStyle) => dispatch(actions.toggleTableStyle(inlineStyle)),
+    toggleTableBlockType: (type) => dispatch(actions.toggleTableBlockType(type)),
+    setTablePopup: (type, data) => dispatch(actions.setTablePopup(type, data)),
 });
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state: IEditorStore) => ({
     activeCell: state.activeCell,
     editorState: state.editorState,
-    editorFormat: state.editorFormat,
+    popup: state.popup,
 });
 
-const TableControls = connect(mapStateToProps, mapDispatchToProps)(TableControlsComponent);
-
-export default TableControls;
+export const TableControls: React.ComponentType<IOwnProps> = connect<IReduxStateProps, IDispatchProps, IOwnProps>(
+    mapStateToProps,
+    mapDispatchToProps,
+)(TableControlsComponent);
diff --git a/scripts/core/editor3/components/toolbar/index.tsx b/scripts/core/editor3/components/toolbar/index.tsx
index 073ebb57c9..eea4f83ceb 100644
--- a/scripts/core/editor3/components/toolbar/index.tsx
+++ b/scripts/core/editor3/components/toolbar/index.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import BlockStyleButtons from './BlockStyleButtons';
 import InlineStyleButtons from './InlineStyleButtons';
-import TableControls from './TableControls';
+import {TableControls} from './TableControls';
 import StyleButton from './StyleButton';
 import {SelectionButton} from './SelectionButton';
 import {IconButton} from './IconButton';
@@ -13,10 +13,13 @@ import * as actions from '../../actions';
 import {PopupTypes, changeCase, undo, redo} from '../../actions';
 import {getHighlightsConfig} from '../../highlightsConfig';
 import {gettext} from 'core/utils';
-import {MultiLineQuoteControls} from './MultiLineQuoteControls';
-import {assertNever} from 'core/helpers/typescript-helpers';
 import {IEditorStore} from 'core/editor3/store';
-import {IEditorComponentProps} from 'superdesk-api';
+import {TreeMenu} from 'superdesk-ui-framework/react';
+import {IEditorComponentProps, IVocabularyEditorBlock, RICH_FORMATTING_OPTION} from 'superdesk-api';
+import {RawDraftContentState, convertToRaw, ContentState} from 'draft-js';
+import {sdApi} from 'api';
+import {assertNever} from 'core/helpers/typescript-helpers';
+import {getFormattingOptionsForTableLikeBlocks} from 'core/editor3/get-formatting-options-for-table';
 
 interface IState {
     // When true, the toolbar is floating at the top of the item. This
@@ -27,25 +30,40 @@ interface IState {
     width: string | number;
 }
 
-interface IProps extends Partial<IEditorStore> {
-    toggleSuggestingMode(): void;
-    showPopup(type, data): void;
+interface IReduxStateProps {
+    editorState: IEditorStore['editorState'];
+    editorFormat: IEditorStore['editorFormat'];
+    activeCell: IEditorStore['activeCell'];
+    popup: IEditorStore['popup'];
+    suggestingMode: IEditorStore['suggestingMode'];
+    invisibles: IEditorStore['invisibles'];
+}
+
+interface IDispatchProps {
     addMultiLineQuote(): void;
+    insertMedia(): void;
+    addTable(): void;
+    removeFormat(): void;
+    showPopup(type, data): void;
+    addCustomBlock(initialContent: RawDraftContentState, vocabularyId: string, label: string): void;
+    toggleSuggestingMode(): void;
     toggleInvisibles(): void;
     removeAllFormat(): void;
     dispatch(fn: any): void;
-    removeFormat(): void;
-    insertMedia(): void;
-    addTable(): void;
+}
+
+interface IOwnProps {
     editorWrapperElement: any;
     scrollContainer: string;
     highlightsManager: any;
     editorNode: any;
     disabled: boolean;
-    popup: any;
     uiTheme: IEditorComponentProps<unknown, unknown, unknown>['uiTheme'];
+    draggingInProgress: boolean;
 }
 
+type IProps = IOwnProps & IReduxStateProps & IDispatchProps;
+
 /**
  * @ngdoc React
  * @module superdesk.core.editor3
@@ -159,7 +177,6 @@ class ToolbarComponent extends React.Component<IProps, IState> {
     render() {
         const {floating} = this.state;
         const {
-            customToolbarStyle,
             suggestingMode,
             editorFormat,
             invisibles,
@@ -168,6 +185,7 @@ class ToolbarComponent extends React.Component<IProps, IState> {
             popup,
             toggleSuggestingMode,
             addMultiLineQuote,
+            addCustomBlock,
             toggleInvisibles,
             removeAllFormat,
             removeFormat,
@@ -175,204 +193,280 @@ class ToolbarComponent extends React.Component<IProps, IState> {
             addTable,
             dispatch,
             editorState,
+            draggingInProgress,
         } = this.props;
 
-        const has = (opt) => editorFormat.indexOf(opt) > -1;
+        const has = (opt: RICH_FORMATTING_OPTION) => editorFormat.indexOf(opt) > -1;
         const showPopup = (type) => (data) => this.props.showPopup(type, data);
         const cx = classNames({
             'Editor3-controls': true,
             'floating-toolbar': floating,
+            'floating-toolbar-invisible': floating && draggingInProgress,
             disabled: disabled && activeCell === null,
         });
 
-        if (activeCell == null) {
+        if (activeCell != null) {
             return (
-                <div
+                <TableControls
                     className={cx}
-                    style={{
-                        width: this.state.width,
-                        backgroundColor: this.props.uiTheme == null
-                            ? undefined
-                            : this.props.uiTheme.backgroundColorSecondary,
-                        color: this.props.uiTheme == null ? undefined : this.props.uiTheme.textColor,
-                    }}
-                    ref={this.toolbarNode}
-                    data-test-id="toolbar"
-                >
-                    {/* Styles */}
-                    <BlockStyleButtons />
-                    <InlineStyleButtons />
-
-                    {/* Formatting options */}
-                    {has('link') && (
-                        <SelectionButton
-                            onClick={showPopup(PopupTypes.Link)}
-                            iconName="link"
-                            tooltip={gettext('Link (Ctrl+K)')}
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-                    {has('embed') && (
-                        <IconButton
-                            onClick={showPopup(PopupTypes.Embed)}
-                            iconName="code"
-                            tooltip="Embed"
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-                    {has('media') && (
-                        <IconButton
-                            onClick={insertMedia}
-                            tooltip={gettext('Media')}
-                            iconName="picture"
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-                    {has('table') && (
-                        <IconButton
-                            onClick={addTable}
-                            tooltip={gettext('Table')}
-                            iconName="table"
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-                    {has('multi-line quote') && (
-                        <IconButton
-                            onClick={() => {
-                                addMultiLineQuote();
-                            }}
-                            tooltip={gettext('Multi-line quote')}
-                            iconName="text-block"
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-                    {has('remove format') && (
-                        <SelectionButton
-                            onClick={removeFormat}
-                            precondition={!suggestingMode}
-                            key="remove-format-button"
-                            iconName="clear-format"
-                            tooltip={gettext('Remove formatting')}
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-                    {(has('remove all format') && !suggestingMode) && (
-                        <IconButton
-                            onClick={removeAllFormat}
-                            key="remove-all-format-button"
-                            iconName="clear-all"
-                            tooltip={gettext('Remove all formatting')}
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-                    {has('comments') && (
-                        <SelectionButton
-                            onClick={showPopup(PopupTypes.Comment)}
-                            precondition={
-                                this.props.highlightsManager.canAddHighlight(getHighlightsConfig().COMMENT.type)
+                    tableKind={activeCell.additional.tableKind}
+                    editorFormat={(() => {
+                        switch (activeCell.additional.tableKind) {
+                        case 'table':
+                            return editorFormat;
+                        case 'multi-line-quote':
+                            return editorFormat.filter((option) => option !== 'quote');
+                        case 'custom-block': {
+                            const vocabulary = sdApi.vocabularies.getAll().get(activeCell.additional.vocabularyId);
+
+                            if (vocabulary.field_type !== 'editor-block') {
+                                throw new Error();
                             }
-                            key="comment-button"
-                            iconName="comment"
-                            tooltip={gettext('Comment')}
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-                    {has('annotation') && (
-                        <SelectionButton
-                            onClick={showPopup(PopupTypes.Annotation)}
-                            precondition={
-                                this.props.highlightsManager.canAddHighlight(getHighlightsConfig().ANNOTATION.type)
-                            }
-                            key="annotation-button"
-                            iconName="edit-line"
-                            tooltip={gettext('Annotation')}
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-
-                    {has('suggestions') && (
-                        <StyleButton
-                            active={suggestingMode}
-                            label={'suggestions'}
-                            style={'suggestions'}
-                            onToggle={toggleSuggestingMode}
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-
-                    {has('formatting marks') && (
-                        <StyleButton
-                            active={invisibles}
-                            label={'invisibles'}
-                            style={'invisibles'}
-                            onToggle={toggleInvisibles}
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-
-                    {has('uppercase') && (
-                        <SelectionButton
-                            onClick={({selection}) => dispatch(changeCase('uppercase', selection))}
-                            precondition={!suggestingMode}
-                            key="uppercase-button"
-                            iconName="to-uppercase"
-                            tooltip={gettext('Convert text to uppercase')}
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-
-                    {has('lowercase') && (
-                        <SelectionButton
-                            onClick={({selection}) => dispatch(changeCase('lowercase', selection))}
-                            precondition={!suggestingMode}
-                            key="lowercase-button"
-                            iconName="to-lowercase"
-                            tooltip={gettext('Convert text to lowercase')}
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-
-                    {has('undo') && (
-                        <IconButton
-                            onClick={() => {
-                                this.props.dispatch(undo());
-                            }}
-                            tooltip={gettext('Undo') + ' (ctrl + z)'}
-                            iconName="undo"
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-
-                    {has('redo') && (
-                        <IconButton
-                            onClick={() => {
-                                this.props.dispatch(redo());
-                            }}
-                            tooltip={gettext('Redo') + ' (ctrl + y)'}
-                            iconName="redo"
-                            uiTheme={this.props.uiTheme}
-                        />
-                    )}
-
-                    <ToolbarPopup
-                        type={popup.type}
-                        data={popup.data}
-                        editorState={this.props.editorState}
-                        highlightsManager={this.props.highlightsManager}
-                        uiTheme={this.props.uiTheme}
-                    />
 
-                    {/* LinkToolbar must be the last node. */}
-                    <LinkToolbar editorState={editorState} onEdit={showPopup(PopupTypes.Link)} />
-                </div>
+                            const availableOptions = new Set(getFormattingOptionsForTableLikeBlocks());
+
+                            const vocabularyValues = (
+                                vocabulary.field_options.formatting_options ?? []
+                            ) as Array<RICH_FORMATTING_OPTION>;
+
+                            return vocabularyValues.filter(
+                                (option) => availableOptions.has(option as RICH_FORMATTING_OPTION),
+                            );
+                        }
+                        default:
+                            assertNever(activeCell.additional);
+                        }
+                    })()}
+                />
             );
-        } else if (customToolbarStyle === 'multiLineQuote') {
-            return <MultiLineQuoteControls className={cx} />;
-        } else if (activeCell || customToolbarStyle === 'table') {
-            return <TableControls className={cx} />;
-        } else {
-            assertNever(customToolbarStyle);
         }
+
+        return (
+            <div
+                className={cx}
+                style={{
+                    width: this.state.width,
+                    backgroundColor: this.props.uiTheme == null
+                        ? undefined
+                        : this.props.uiTheme.backgroundColorSecondary,
+                    color: this.props.uiTheme == null ? undefined : this.props.uiTheme.textColor,
+                }}
+                ref={this.toolbarNode}
+                data-test-id="toolbar"
+            >
+                {/* Styles */}
+                <BlockStyleButtons />
+                <InlineStyleButtons />
+
+                {/* Formatting options */}
+                {has('link') && (
+                    <SelectionButton
+                        onClick={showPopup(PopupTypes.Link)}
+                        iconName="link"
+                        tooltip={gettext('Link (Ctrl+K)')}
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+                {has('embed') && (
+                    <IconButton
+                        onClick={showPopup(PopupTypes.Embed)}
+                        iconName="code"
+                        tooltip="Embed"
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+                {has('media') && (
+                    <IconButton
+                        onClick={insertMedia}
+                        tooltip={gettext('Media')}
+                        iconName="picture"
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+                {has('table') && (
+                    <IconButton
+                        onClick={addTable}
+                        tooltip={gettext('Table')}
+                        iconName="table"
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+                {has('multi-line quote') && (
+                    <IconButton
+                        onClick={() => {
+                            addMultiLineQuote();
+                        }}
+                        tooltip={gettext('Multi-line quote')}
+                        iconName="text-block"
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+
+                {(() => {
+                    const options = sdApi.vocabularies
+                        .getAll()
+                        .filter((vocabulary) => vocabulary.field_type === 'editor-block')
+                        .map((vocabulary: IVocabularyEditorBlock) => ({
+                            value: vocabulary.display_name,
+                            onSelect: () => {
+                                const contentStateRaw = vocabulary.field_options?.template?.[0]
+                                    ?? convertToRaw(ContentState.createFromText(''));
+
+                                addCustomBlock(
+                                    contentStateRaw,
+                                    vocabulary._id,
+                                    vocabulary.display_name,
+                                );
+                            },
+                        }))
+                        .toArray();
+
+                    if (has('custom blocks') && options.length > 0) {
+                        return (
+                            <div style={{display: 'inline-flex'}}>
+                                <TreeMenu
+                                    getOptions={() => options}
+                                    getLabel={(item) => item}
+                                    getId={(item) => item}
+                                >
+                                    {(toggle) => (
+                                        <IconButton
+                                            onClick={(event) => {
+                                                toggle(event);
+                                            }}
+                                            tooltip={gettext('Custom block')}
+                                            iconName="plus-large"
+                                            uiTheme={this.props.uiTheme}
+                                        />
+                                    )}
+                                </TreeMenu>
+                            </div>
+                        );
+                    } else {
+                        return null;
+                    }
+                })()}
+
+                {has('remove format') && (
+                    <SelectionButton
+                        onClick={removeFormat}
+                        precondition={!suggestingMode}
+                        key="remove-format-button"
+                        iconName="clear-format"
+                        tooltip={gettext('Remove formatting')}
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+                {(has('remove all format') && !suggestingMode) && (
+                    <IconButton
+                        onClick={removeAllFormat}
+                        key="remove-all-format-button"
+                        iconName="clear-all"
+                        tooltip={gettext('Remove all formatting')}
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+                {has('comments') && (
+                    <SelectionButton
+                        onClick={showPopup(PopupTypes.Comment)}
+                        precondition={
+                            this.props.highlightsManager.canAddHighlight(getHighlightsConfig().COMMENT.type)
+                        }
+                        key="comment-button"
+                        iconName="comment"
+                        tooltip={gettext('Comment')}
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+                {has('annotation') && (
+                    <SelectionButton
+                        onClick={showPopup(PopupTypes.Annotation)}
+                        precondition={
+                            this.props.highlightsManager.canAddHighlight(getHighlightsConfig().ANNOTATION.type)
+                        }
+                        key="annotation-button"
+                        iconName="edit-line"
+                        tooltip={gettext('Annotation')}
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+
+                {has('suggestions') && (
+                    <StyleButton
+                        active={suggestingMode}
+                        label={'suggestions'}
+                        style={'suggestions'}
+                        onToggle={toggleSuggestingMode}
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+
+                {has('formatting marks') && (
+                    <StyleButton
+                        active={invisibles}
+                        label={'invisibles'}
+                        style={'invisibles'}
+                        onToggle={toggleInvisibles}
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+
+                {has('uppercase') && (
+                    <SelectionButton
+                        onClick={({selection}) => dispatch(changeCase('uppercase', selection))}
+                        precondition={!suggestingMode}
+                        key="uppercase-button"
+                        iconName="to-uppercase"
+                        tooltip={gettext('Convert text to uppercase')}
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+
+                {has('lowercase') && (
+                    <SelectionButton
+                        onClick={({selection}) => dispatch(changeCase('lowercase', selection))}
+                        precondition={!suggestingMode}
+                        key="lowercase-button"
+                        iconName="to-lowercase"
+                        tooltip={gettext('Convert text to lowercase')}
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+
+                {has('undo') && (
+                    <IconButton
+                        onClick={() => {
+                            this.props.dispatch(undo());
+                        }}
+                        tooltip={gettext('Undo') + ' (ctrl + z)'}
+                        iconName="undo"
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+
+                {has('redo') && (
+                    <IconButton
+                        onClick={() => {
+                            this.props.dispatch(redo());
+                        }}
+                        tooltip={gettext('Redo') + ' (ctrl + y)'}
+                        iconName="redo"
+                        uiTheme={this.props.uiTheme}
+                    />
+                )}
+
+                <ToolbarPopup
+                    type={popup.type}
+                    data={popup.data}
+                    editorState={this.props.editorState}
+                    highlightsManager={this.props.highlightsManager}
+                    uiTheme={this.props.uiTheme}
+                />
+
+                {/* LinkToolbar must be the last node. */}
+                <LinkToolbar editorState={editorState} onEdit={showPopup(PopupTypes.Link)} />
+            </div>
+        );
     }
 }
 
@@ -383,7 +477,6 @@ const mapStateToProps = ({
     editorState,
     suggestingMode,
     invisibles,
-    customToolbarStyle,
 }) => ({
     editorFormat,
     activeCell,
@@ -391,7 +484,6 @@ const mapStateToProps = ({
     editorState,
     suggestingMode,
     invisibles,
-    customToolbarStyle,
 });
 
 const mapDispatchToProps = (dispatch: (fn: any) => void) => ({
@@ -399,6 +491,8 @@ const mapDispatchToProps = (dispatch: (fn: any) => void) => ({
     showPopup: (type, data) => dispatch(actions.showPopup(type, data)),
     addTable: () => dispatch(actions.addTable()),
     addMultiLineQuote: () => dispatch(actions.addMultiLineQuote()),
+    addCustomBlock: (initialContent: RawDraftContentState, vocabularyId: string, label: string) =>
+        dispatch(actions.addCustomBlock(initialContent, vocabularyId, label)),
     toggleSuggestingMode: () => dispatch(actions.toggleSuggestingMode()),
     toggleInvisibles: () => dispatch(actions.toggleInvisibles()),
     removeFormat: () => dispatch(actions.removeFormat()),
@@ -406,6 +500,6 @@ const mapDispatchToProps = (dispatch: (fn: any) => void) => ({
     dispatch: dispatch,
 });
 
-const Toolbar = connect(mapStateToProps, mapDispatchToProps)(ToolbarComponent);
+const Toolbar: React.ComponentType<IOwnProps> = connect(mapStateToProps, mapDispatchToProps)(ToolbarComponent);
 
 export default Toolbar;
diff --git a/scripts/core/editor3/constants.ts b/scripts/core/editor3/constants.ts
index 1fc2b97604..d4d84b4d29 100644
--- a/scripts/core/editor3/constants.ts
+++ b/scripts/core/editor3/constants.ts
@@ -1,3 +1,5 @@
+import {RICH_FORMATTING_OPTION} from 'superdesk-api';
+
 export const EDITOR_BLOCK_TYPE = 'superdesk/editor3-block';
 
 /**
@@ -10,5 +12,13 @@ export enum CustomEditor3Entity {
     EMBED = 'EMBED',
     TABLE = 'TABLE',
     MULTI_LINE_QUOTE = 'MULTI-LINE_QUOTE',
+    CUSTOM_BLOCK = 'CUSTOM_BLOCK',
     ARTICLE_EMBED = 'ARTICLE_EMBED',
 }
+
+export const formattingOptionsThatRequireDragAndDrop = new Set<RICH_FORMATTING_OPTION>([
+    'media',
+    'multi-line quote',
+    'embed articles',
+    'custom blocks',
+]);
diff --git a/scripts/core/editor3/directive.tsx b/scripts/core/editor3/directive.tsx
index 47c776e5db..38b76dcf99 100644
--- a/scripts/core/editor3/directive.tsx
+++ b/scripts/core/editor3/directive.tsx
@@ -15,7 +15,7 @@ import createEditorStore, {
 } from './store';
 import {getContentStateFromHtml} from './html/from-html';
 
-import {changeEditorState, setReadOnly, changeLimitConfig} from './actions';
+import {changeEditorState, setReadOnly, changeLimitConfig, setExternalOptions} from './actions';
 
 import ng from 'core/services/ng';
 import {IArticle, RICH_FORMATTING_OPTION} from 'superdesk-api';
@@ -519,6 +519,10 @@ class Editor3Directive {
                     renderEditor3();
                 });
 
+                $scope.$watch('vm.editorFormat', (editorFormat) => {
+                    store.dispatch(setExternalOptions({editorFormat: editorFormat}));
+                });
+
                 // this is triggered from MacrosController.call
                 // if the current editor is for 'field' replace the current content with 'value'
                 $scope.$on(
diff --git a/scripts/core/editor3/get-formatting-options-for-table.tsx b/scripts/core/editor3/get-formatting-options-for-table.tsx
new file mode 100644
index 0000000000..0e7be2fdce
--- /dev/null
+++ b/scripts/core/editor3/get-formatting-options-for-table.tsx
@@ -0,0 +1,46 @@
+import {RICH_FORMATTING_OPTION} from 'superdesk-api';
+
+export function getFormattingOptionsForTableLikeBlocks(): Array<RICH_FORMATTING_OPTION> {
+    const options: {[K in RICH_FORMATTING_OPTION] : boolean} = {
+        h1: true,
+        h2: true,
+        h3: true,
+        h4: true,
+        h5: true,
+        h6: true,
+        superscript: true,
+        subscript: true,
+        strikethrough: true,
+        link: true,
+        underline: true,
+        italic: true,
+        bold: true,
+        'ordered list': true,
+        'unordered list': true,
+        pre: true,
+        quote: true,
+
+        uppercase: false,
+        lowercase: false,
+        undo: false,
+        redo: false,
+        'formatting marks': false,
+        'remove format': false,
+        'remove all format': false,
+        tab: false,
+        'tab as spaces': false,
+        'multi-line quote': false,
+        'custom blocks': false,
+        table: false,
+        media: false,
+        'embed articles': false,
+        annotation: false,
+        comments: false,
+        suggestions: false,
+        embed: false,
+    };
+
+    return Object.entries(options)
+        .filter(([_key, value]) => value === true)
+        .map(([key]: [RICH_FORMATTING_OPTION, boolean]) => key);
+}
diff --git a/scripts/core/editor3/helpers/table.ts b/scripts/core/editor3/helpers/table.ts
index 61994ee3d2..b8d33f331c 100644
--- a/scripts/core/editor3/helpers/table.ts
+++ b/scripts/core/editor3/helpers/table.ts
@@ -10,6 +10,7 @@ import {
 } from 'draft-js';
 import {OrderedSet, Map} from 'immutable';
 import {createBlockSelection} from './selection';
+import {getBlockKeys} from './selection/blockKeys';
 
 /**
  * Retrieves the editor state of the cell at row/col.
@@ -65,7 +66,12 @@ export function getCell(data: IEditor3TableData, row, col, currentStyle, selecti
  * @description Updates data about this cell inside the entity for this atomic
  * block.
  */
-export function setCell(data: IEditor3TableData, row, col, cellEditorState: EditorState) {
+export function setCell(
+    data: IEditor3TableData | IEditor3CustomBlockData,
+    row,
+    col,
+    cellEditorState: EditorState,
+): {data: IEditor3TableData | IEditor3CustomBlockData, needUpdate: boolean; forceUpdate: boolean} {
     const cellContentState = cellEditorState.getCurrentContent();
     let needUpdate = true;
     let forceUpdate = true;
@@ -117,6 +123,11 @@ export interface IEditor3TableData {
     currentStyle?: string;
 }
 
+export interface IEditor3CustomBlockData extends IEditor3TableData {
+    vocabularyId: string;
+    label: string;
+}
+
 /**
  * @ngdoc method
  * @name setData
@@ -128,7 +139,7 @@ export interface IEditor3TableData {
 export function setData(
     editorState: EditorState,
     block: ContentBlock,
-    data: IEditor3TableData,
+    data: IEditor3TableData | IEditor3CustomBlockData,
     lastChangeType,
 ): EditorState {
     const contentState = editorState.getCurrentContent();
@@ -168,3 +179,39 @@ export function setDataForContent(
 
     return newContentState;
 }
+
+export function getTableWithSingleCell(
+    editorState: EditorState,
+    initialContent?: RawDraftContentState | 'editor-selection',
+): IEditor3TableData {
+    const initialCellData: RawDraftContentState | null = (() => {
+        const contentState = editorState.getCurrentContent();
+        const selectionState = editorState.getSelection();
+
+        if (initialContent == null) {
+            return null;
+        } else if (initialContent === 'editor-selection') {
+            if (!selectionState.isCollapsed()) {
+                // Get user selected content
+                const selectedBlocks =
+                    getBlockKeys(contentState, selectionState.getStartKey(), selectionState.getEndKey())
+                        .map((key) => contentState.getBlockForKey(key));
+
+                return convertToRaw(ContentState.createFromBlockArray(selectedBlocks));
+            } else {
+                return null;
+            }
+        } else {
+            return initialContent;
+        }
+    })();
+
+    const data: IEditor3TableData = {
+        cells: initialCellData == null ? [[]] : [[initialCellData]],
+        numRows: 1,
+        numCols: 1,
+        withHeader: false,
+    };
+
+    return data;
+}
diff --git a/scripts/core/editor3/html/to-html/AtomicBlockParser.ts b/scripts/core/editor3/html/to-html/AtomicBlockParser.ts
index bd9a2823ef..d43948a2a1 100644
--- a/scripts/core/editor3/html/to-html/AtomicBlockParser.ts
+++ b/scripts/core/editor3/html/to-html/AtomicBlockParser.ts
@@ -2,10 +2,12 @@ import {ContentState, convertFromRaw, convertToRaw, ContentBlock} from 'draft-js
 import {isQumuWidget, postProccessQumuEmbed} from '../../components/embeds/QumuWidget';
 import {logger} from 'core/services/logger';
 import {editor3StateToHtml} from './editor3StateToHtml';
-import {getData, IEditor3TableData} from 'core/editor3/helpers/table';
+import {getData, IEditor3CustomBlockData, IEditor3TableData} from 'core/editor3/helpers/table';
 import {MULTI_LINE_QUOTE_CLASS} from 'core/editor3/components/multi-line-quote/MultiLineQuote';
 import {CustomEditor3Entity} from 'core/editor3/constants';
 import {IEditorDragDropArticleEmbed} from 'core/editor3/reducers/editor3';
+import {assertNever} from 'core/helpers/typescript-helpers';
+import {sdApi} from 'api';
 
 /**
  * @ngdoc class
@@ -44,7 +46,9 @@ export class AtomicBlockParser {
         const data = entity.getData();
         const rawKey = this.getRawKey(data);
 
-        switch (entity.getType()) {
+        const entityType: CustomEditor3Entity = entity.getType();
+
+        switch (entityType) {
         case CustomEditor3Entity.MEDIA:
             return this.parseMedia(data, rawKey).trim();
         case CustomEditor3Entity.EMBED:
@@ -53,6 +57,8 @@ export class AtomicBlockParser {
             return this.parseTable(getData(this.contentState, contentBlock.getKey())).trim();
         case CustomEditor3Entity.MULTI_LINE_QUOTE:
             return this.parseMultiLineQuote(getData(this.contentState, contentBlock.getKey())).trim();
+        case CustomEditor3Entity.CUSTOM_BLOCK:
+            return this.parseCustomBlock(getData(this.contentState, contentBlock.getKey())).trim();
         case CustomEditor3Entity.ARTICLE_EMBED:
             // eslint-disable-next-line no-case-declarations
             const item = (data as IEditorDragDropArticleEmbed['data']).item;
@@ -60,6 +66,7 @@ export class AtomicBlockParser {
             return `<div data-association-key="${item._id}">${item.body_html}</div>`;
         default:
             logger.warn(`Editor3: Cannot generate HTML for entity type of ${entity.getType()}`, data);
+            assertNever(entityType);
         }
     }
 
@@ -218,4 +225,39 @@ export class AtomicBlockParser {
 
         return html;
     }
+
+    parseCustomBlock(data: IEditor3CustomBlockData): string {
+        if (this.disabled.indexOf('table') > -1) {
+            return '';
+        }
+
+        function getHighestHeadingText(el: HTMLElement): string | null {
+            const headings: Array<keyof HTMLElementTagNameMap> = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+
+            for (const tag of headings) {
+                const result = el.querySelector(tag);
+
+                if (result != null) {
+                    return result.textContent;
+                }
+            }
+
+            return null;
+        }
+
+        const {cells} = data;
+        const blockName = sdApi.vocabularies.getAll().get(data.vocabularyId).display_name;
+        const cellContentState: ContentState = convertFromRaw(cells[0][0]);
+        const tableCellContentHtml = editor3StateToHtml(cellContentState);
+        const tableCellContentElement: HTMLElement =
+            new DOMParser().parseFromString(tableCellContentHtml, 'text/html').body;
+        const heading: string | null = getHighestHeadingText(tableCellContentElement);
+        const attributes = [`data-custom-block-type="${blockName}"`];
+
+        if (heading != null) {
+            attributes.push(`data-custom-block-title="${heading}"`);
+        }
+
+        return `<div ${attributes.join(' ')}>${tableCellContentHtml}</div>`;
+    }
 }
diff --git a/scripts/core/editor3/reducers/custom-block.tsx b/scripts/core/editor3/reducers/custom-block.tsx
new file mode 100644
index 0000000000..e90bc91911
--- /dev/null
+++ b/scripts/core/editor3/reducers/custom-block.tsx
@@ -0,0 +1,27 @@
+import {RawDraftContentState} from 'draft-js';
+import {IEditorStore} from '../store';
+import {CustomEditor3Entity} from '../constants';
+import {getTableWithSingleCell} from '../helpers/table';
+import {addTable} from './table';
+
+export const customBlockReducer = (state: IEditorStore = {} as IEditorStore, action) => {
+    switch (action.type) {
+    case 'TOOLBAR_ADD_CUSTOM_BLOCK': {
+        const initialContent: RawDraftContentState = action.payload.initialContent;
+
+        return addTable(
+            state,
+            {
+                entityKind: CustomEditor3Entity.CUSTOM_BLOCK,
+                entityData: {
+                    ...getTableWithSingleCell(state.editorState, initialContent),
+                    vocabularyId: action.payload.vocabularyId,
+                    label: action.payload.label,
+                },
+            },
+        );
+    }
+    default:
+        return state;
+    }
+};
diff --git a/scripts/core/editor3/reducers/editor3.tsx b/scripts/core/editor3/reducers/editor3.tsx
index 5842b0701e..ebc03eb62c 100644
--- a/scripts/core/editor3/reducers/editor3.tsx
+++ b/scripts/core/editor3/reducers/editor3.tsx
@@ -19,6 +19,7 @@ import {assertNever} from 'core/helpers/typescript-helpers';
 import {CustomEditor3Entity} from '../constants';
 import {IArticle} from 'superdesk-api';
 import {IAcceptSuggestion} from '../components/spellchecker/SpellcheckerContextMenu';
+import {IActiveCell} from '../components/tables/TableBlock';
 
 /**
  * @description Contains the list of editor related reducers.
@@ -446,10 +447,10 @@ const setReadOnly = (state, readOnly) => ({
  * @return {Object} New state
  * @description Sets the currently being edited (active) table cell.
  */
-const setCell = (state, {i, j, key, currentStyle, selection}) => ({
+const setCell = (state, activeCell: IActiveCell) => ({
     ...state,
     locked: true,
-    activeCell: {i, j, key, currentStyle, selection},
+    activeCell,
 });
 
 const mergeEntityDataByKey = (state, {blockKey, entityKey, valuesToMerge}) => {
diff --git a/scripts/core/editor3/reducers/index.tsx b/scripts/core/editor3/reducers/index.tsx
index fe638c2f6f..dc755981fe 100644
--- a/scripts/core/editor3/reducers/index.tsx
+++ b/scripts/core/editor3/reducers/index.tsx
@@ -4,7 +4,8 @@ import toolbar from './toolbar';
 import table from './table';
 import suggestions from './suggestions';
 import findReplace from './find-replace';
-import multiLineQuote from './multi-line-quote';
+import {multiLineQuoteReducer} from './multi-line-quote';
+import {customBlockReducer} from './custom-block';
 
 // Returns a new reducer which chains the state and action throught the given
 // list of reducers.
@@ -19,7 +20,8 @@ const editorReducers = chainReduce(
     editor3,
     findReplace,
     suggestions,
-    multiLineQuote,
+    multiLineQuoteReducer,
+    customBlockReducer,
 );
 
 export default editorReducers;
diff --git a/scripts/core/editor3/reducers/multi-line-quote.tsx b/scripts/core/editor3/reducers/multi-line-quote.tsx
index 41fd1ea08f..07c59ac65d 100644
--- a/scripts/core/editor3/reducers/multi-line-quote.tsx
+++ b/scripts/core/editor3/reducers/multi-line-quote.tsx
@@ -1,79 +1,19 @@
-import insertAtomicBlockWithoutEmptyLines from '../helpers/insertAtomicBlockWithoutEmptyLines';
-import {ContentState, convertToRaw, RawDraftContentState} from 'draft-js';
-import {getBlockKeys} from '../helpers/selection/blockKeys';
 import {IEditorStore} from '../store';
-import {onChange} from './editor3';
 import {CustomEditor3Entity} from '../constants';
+import {getTableWithSingleCell} from '../helpers/table';
+import {addTable} from './table';
 
-/**
- * Contains the list of multi-line quote related reducers.
- */
-const multiLineQuote = (state: IEditorStore | any = {}, action) => {
+export function multiLineQuoteReducer(state: IEditorStore | any = {}, action) {
     switch (action.type) {
     case 'TOOLBAR_ADD_MULTI-LINE_QUOTE':
-        return addMultiLineQuote(state);
-    default:
-        return state;
-    }
-};
-
-/**
- * Multi-line quote reuses the table component so data has to be
- * compatible with table's data structure.
- */
-const getTableData = (cells?: RawDraftContentState) => {
-    const data = {
-        data: {
-            cells: [],
-            numRows: 1,
-            numCols: 1,
-            withHeader: false,
-        },
-    };
-
-    if (cells != null) {
-        return {
-            data: {
-                ...data.data,
-                cells: {0: {0: cells}},
+        return addTable(
+            state,
+            {
+                entityKind: CustomEditor3Entity.MULTI_LINE_QUOTE,
+                entityData: getTableWithSingleCell(state.editorState, 'editor-selection'),
             },
-        };
-    } else {
-        return data;
-    }
-};
-
-const addMultiLineQuote = (state: IEditorStore) => {
-    const contentState = state.editorState.getCurrentContent();
-    const selectionState = state.editorState.getSelection();
-    let contentStateWithEntity: ContentState;
-
-    if (!selectionState.isCollapsed()) {
-        // Get user selected content and insert it into the newly created MULTI-LINE_QUOTE block
-        const selectedBlocks = getBlockKeys(contentState, selectionState.getStartKey(), selectionState.getEndKey())
-            .map((key) => contentState.getBlockForKey(key));
-
-        contentStateWithEntity = contentState.createEntity(
-            CustomEditor3Entity.MULTI_LINE_QUOTE,
-            'MUTABLE',
-            getTableData(convertToRaw(ContentState.createFromBlockArray(selectedBlocks))),
-        );
-    } else {
-        contentStateWithEntity = contentState.createEntity(
-            CustomEditor3Entity.MULTI_LINE_QUOTE,
-            'MUTABLE',
-            getTableData(),
         );
+    default:
+        return state;
     }
-
-    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
-    const {editorState} = insertAtomicBlockWithoutEmptyLines(
-        state.editorState,
-        entityKey,
-        ' ',
-    );
-
-    return onChange(state, editorState);
-};
-
-export default multiLineQuote;
+}
diff --git a/scripts/core/editor3/reducers/table.tsx b/scripts/core/editor3/reducers/table.tsx
index c845224b4a..f5632c9831 100644
--- a/scripts/core/editor3/reducers/table.tsx
+++ b/scripts/core/editor3/reducers/table.tsx
@@ -1,16 +1,27 @@
 import {RichUtils} from 'draft-js';
 import {onChange} from './editor3';
 import insertAtomicBlockWithoutEmptyLines from '../helpers/insertAtomicBlockWithoutEmptyLines';
-import {getCell, setCell, getData, setData, IEditor3TableData} from '../helpers/table';
+import {getCell, setCell, getData, setData, IEditor3TableData, IEditor3CustomBlockData} from '../helpers/table';
 import {CustomEditor3Entity} from '../constants';
+import {IEditorStore} from '../store';
+import {IActiveCell} from '../components/tables/TableBlock';
 
 /**
  * @description Contains the list of table related reducers.
  */
-const table = (state = {}, action) => {
+const table = (state: IEditorStore = {} as IEditorStore, action) => {
     switch (action.type) {
-    case 'TOOLBAR_ADD_TABLE':
-        return addTable(state, action.payload);
+    case 'TOOLBAR_ADD_TABLE': {
+        const payload: IEditor3TableData = action.payload;
+
+        return addTable(
+            state,
+            {
+                entityKind: CustomEditor3Entity.TABLE,
+                entityData: payload,
+            },
+        );
+    }
     case 'TOOLBAR_ADD_ROW_AFTER':
         return addRowAfter(state);
     case 'TOOLBAR_ADD_COL_AFTER':
@@ -22,9 +33,9 @@ const table = (state = {}, action) => {
     case 'TOOLBAR_TABLE_HEADER':
         return toggleTableHeader(state);
     case 'TOOLBAR_TABLE_STYLE':
-        return toggleTableStyle(state, action.payload);
-    case 'TOOLBAR_MULTI-LINE_STYLE':
-        return toggleMultiLineQuoteBlockStyle(state, action.payload);
+        return toggleTableInlineStyle(state, action.payload);
+    case 'TOOLBAR_TABLE_BLOCK_TYPE':
+        return toggleTableBlockType(state, action.payload);
     default:
         return state;
     }
@@ -36,9 +47,15 @@ const table = (state = {}, action) => {
  * @param {Object} data Table data (numRows, numCols, cells).
  * @description Adds a table into the content.
  */
-const addTable = (state, data) => {
+export const addTable = (
+    state: IEditorStore,
+    data:
+        {entityKind: CustomEditor3Entity.TABLE; entityData: IEditor3TableData}
+        | {entityKind: CustomEditor3Entity.MULTI_LINE_QUOTE; entityData: IEditor3TableData}
+        | {entityKind: CustomEditor3Entity.CUSTOM_BLOCK; entityData: IEditor3CustomBlockData},
+) => {
     const contentState = state.editorState.getCurrentContent();
-    const contentStateWithEntity = contentState.createEntity(CustomEditor3Entity.TABLE, 'MUTABLE', {data});
+    const contentStateWithEntity = contentState.createEntity(data.entityKind, 'MUTABLE', {data: data.entityData});
     const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
 
     const {editorState} = insertAtomicBlockWithoutEmptyLines(
@@ -56,19 +73,28 @@ const addTable = (state, data) => {
  * @description Adds a row after the currently active one.
  */
 const addRowAfter = (state) =>
-    processCells(state, (prevCells, numCols, nRows, i, j, withHeader) => {
-        const numRows = nRows + 1;
-        const cells = [];
+    processCells(state, (tableData, activeCell) => {
+        const {i} = activeCell;
+        const {cells, numRows} = tableData;
+
 
-        prevCells.forEach((row, index) => {
-            cells.push(row);
+        const nextCells = [];
+
+        cells.forEach((row, index) => {
+            nextCells.push(row);
 
             if (index === i) {
-                cells.push([]);
+                nextCells.push([]);
             }
         });
 
-        return {data: {cells, numRows, numCols, withHeader}};
+        return {
+            data: {
+                ...tableData,
+                cells: nextCells,
+                numRows: numRows + 1,
+            },
+        };
     });
 
 /**
@@ -77,15 +103,23 @@ const addRowAfter = (state) =>
  * @description Removes the currently active row.
  */
 const removeRow = (state) =>
-    processCells(state, (cells, numCols, nRows, i, j, withHeader) => {
+    processCells(state, (tableData, activeCell) => {
+        const {cells} = tableData;
+        const nRows = tableData.numRows;
         let numRows = nRows;
 
         if (numRows > 1) {
-            cells.splice(i, 1);
+            cells.splice(activeCell.i, 1);
             numRows -= 1;
         }
 
-        return {data: {cells, numRows, numCols, withHeader}};
+        return {
+            data: {
+                ...tableData,
+                cells,
+                numRows,
+            },
+        };
     });
 
 /**
@@ -94,32 +128,36 @@ const removeRow = (state) =>
  * @description Adds a column after the currently active one.
  */
 const addColAfter = (state) =>
-    processCells(state, (cells, numCols, numRows, i, j, withHeader) => ({
-        data: {
-            numRows: numRows,
-            numCols: numCols + 1,
-            withHeader: withHeader,
-            cells: cells.map((_, ii) =>
-                Array.from(new Array(numCols + 1))
-                    .map((__, jj) => {
-                        if (jj === j + 1) {
-                            return null;
-                        }
+    processCells(state, (tableData, activeCell) => {
+        const {cells, numCols} = tableData;
+        const {j} = activeCell;
 
-                        let orig = jj;
+        return {
+            data: {
+                ...tableData,
+                numCols: tableData.numCols + 1,
+                cells: cells.map((_, ii) =>
+                    Array.from(new Array(numCols + 1))
+                        .map((__, jj) => {
+                            if (jj === j + 1) {
+                                return null;
+                            }
 
-                        if (jj > j + 1) {
-                            orig -= 1;
-                        }
+                            let orig = jj;
 
-                        if (cells[ii] && cells[ii][orig]) {
-                            return cells[ii][orig];
-                        }
+                            if (jj > j + 1) {
+                                orig -= 1;
+                            }
 
-                        return null;
-                    })),
-        },
-    }));
+                            if (cells[ii] && cells[ii][orig]) {
+                                return cells[ii][orig];
+                            }
+
+                            return null;
+                        })),
+            },
+        };
+    });
 
 /**
  * @ngdoc method
@@ -127,8 +165,10 @@ const addColAfter = (state) =>
  * @description Removes the currently active column.
  */
 const removeCol = (state) =>
-    processCells(state, (prevCells, nCols, numRows, i, j, withHeader) => {
-        let numCols = nCols;
+    processCells(state, (tableData, activeCell) => {
+        const {j} = activeCell;
+        const prevCells = tableData.cells;
+        let numCols = tableData.numCols;
         let cells = prevCells;
 
         if (numCols > 1) {
@@ -139,7 +179,13 @@ const removeCol = (state) =>
             });
         }
 
-        return {data: {cells, numRows, numCols, withHeader}};
+        return {
+            data: {
+                ...tableData,
+                cells,
+                numCols,
+            },
+        };
     });
 
 /**
@@ -152,18 +198,23 @@ const removeCol = (state) =>
  * @description Helper function to help process the cells in the currently active
  * table and transform the entity data to a new form, using a callback function.
  */
-export const processCells = (state, fn) => {
+export const processCells = (
+    state: IEditorStore,
+    fn: (tableData: IEditor3TableData | IEditor3CustomBlockData, activeCell: IActiveCell) =>
+        {data: IEditor3TableData | IEditor3CustomBlockData; newCurrentStyle?: any; popup?: any},
+) => {
     const {activeCell, editorState} = state;
 
     if (activeCell === null) {
         return state;
     }
 
-    const {i, j, key, currentStyle, selection} = activeCell;
+    const {key, selection} = activeCell;
     const contentState = editorState.getCurrentContent();
     const block = contentState.getBlockForKey(key);
-    const {cells, numRows, numCols, withHeader} = getData(contentState, block.getKey());
-    const {data, newCurrentStyle, popup} = fn(cells, numCols, numRows, i, j, withHeader, currentStyle, selection);
+    const tableData = getData(contentState, block.getKey());
+
+    const {data, newCurrentStyle, popup} = fn(tableData, activeCell);
     const newEditorState = setData(editorState, block, data, 'change-block-data');
     let newState = state;
 
@@ -204,18 +255,13 @@ export const processCells = (state, fn) => {
 const toggleTableHeader = (state) =>
     processCells(
         state,
-        (cells, numCols, numRows, i, j, withHeader, currentStyle) => {
-            const newData = {
-                cells: cells,
-                numRows: numRows,
-                numCols: numCols,
-                withHeader: !withHeader,
-                currentStyle: currentStyle,
-            };
-
+        (tableData, activeCell) => {
             return {
-                data: newData,
-                newCurrentStyle: currentStyle,
+                data: {
+                    ...tableData,
+                    withHeader: !tableData.withHeader,
+                },
+                newCurrentStyle: activeCell.currentStyle,
             };
         },
     );
@@ -225,35 +271,44 @@ const toggleTableHeader = (state) =>
  * @name toggleTableStyle
  * @description Toggles the table's style.
  */
-const toggleTableStyle = (state, inlineStyle) =>
-    processCells(
+const toggleTableInlineStyle = (state: IEditorStore, inlineStyle) => {
+    return processCells(
         state,
-        (cells, numCols, numRows, i, j, withHeader, currentStyle, selection) => {
-            const data = {cells, numRows, numCols, withHeader};
-            const cellStateEditor = getCell(data, i, j, currentStyle, selection);
+        (tableData, activeCell) => {
+            const {i, j, currentStyle, selection} = activeCell;
+            const cellStateEditor = getCell(tableData, i, j, currentStyle, selection);
             const newCellEditorState = RichUtils.toggleInlineStyle(cellStateEditor, inlineStyle);
             const newCurrentStyle = newCellEditorState.getCurrentInlineStyle().toArray();
-            const newData = setCell(data, i, j, newCellEditorState).data;
+            const tableDataNext: IEditor3TableData | IEditor3CustomBlockData =
+                setCell(tableData, i, j, newCellEditorState).data;
 
             return {
-                data: newData,
+                data: {
+                    ...tableData,
+                    ...tableDataNext,
+                },
                 newCurrentStyle: newCurrentStyle,
             };
         },
     );
+};
 
-const toggleMultiLineQuoteBlockStyle = (state, blockType) =>
+const toggleTableBlockType = (state, blockType) =>
     processCells(
         state,
-        (cells, numCols, numRows, i, j, withHeader, currentStyle, selection) => {
-            const data: IEditor3TableData = {cells, numRows, numCols, withHeader};
-            const cellStateEditor = getCell(data, i, j, currentStyle, selection);
+        (tableData, activeCell) => {
+            const {i, j, currentStyle, selection} = activeCell;
+            const cellStateEditor = getCell(tableData, i, j, currentStyle, selection);
             const newCellEditorState = RichUtils.toggleBlockType(cellStateEditor, blockType);
             const newCurrentStyle = newCellEditorState.getCurrentInlineStyle().toArray();
-            const newData = setCell(data, i, j, newCellEditorState).data;
+            const tableDataNext: IEditor3TableData | IEditor3CustomBlockData =
+                setCell(tableData, i, j, newCellEditorState).data;
 
             return {
-                data: newData,
+                data: {
+                    ...tableData,
+                    ...tableDataNext,
+                },
                 newCurrentStyle: newCurrentStyle,
             };
         },
diff --git a/scripts/core/editor3/reducers/toolbar.tsx b/scripts/core/editor3/reducers/toolbar.tsx
index 2894020ffe..f8dcab7979 100644
--- a/scripts/core/editor3/reducers/toolbar.tsx
+++ b/scripts/core/editor3/reducers/toolbar.tsx
@@ -26,12 +26,12 @@ const toolbar = (state: IEditorStore, action) => {
         return toggleInlineStyle(state, action.payload);
     case 'TOOLBAR_APPLY_LINK':
         return applyLink(state, action.payload);
-    case 'TOOLBAR_APPLY_LINK_MULTI-LINE_QUOTE':
-        return applyLinkToMultiLineQuote(state, action.payload);
+    case 'TOOLBAR_APPLY_LINK_ON_TABLE_CELL':
+        return applyLinkOnTableCell(state, action.payload);
     case 'TOOLBAR_REMOVE_LINK':
         return removeLink(state);
-    case 'TOOLBAR_REMOVE_LINK_MULTI-LINE_QUOTE':
-        return removeLinkInMultiLineQuote(state);
+    case 'TOOLBAR_REMOVE_LINK_IN_TABLE_CELL':
+        return removeLinkInTableCell(state);
     case 'TOOLBAR_REMOVE_FORMAT':
         return removeFormat(state);
     case 'TOOLBAR_REMOVE_ALL_FORMAT':
@@ -52,10 +52,8 @@ const toolbar = (state: IEditorStore, action) => {
         return onChange(state, EditorState.undo(state.editorState));
     case 'REDO':
         return onChange(state, EditorState.redo(state.editorState));
-    case 'SET_CUSTOM_TOOLBAR' :
-        return setCustomToolbar(state, action.payload);
-    case 'SET_MULTI-LINE_QUOTE_POPUP' :
-        return setMultiLinePopup(state, action.payload);
+    case 'SET_TABLE_POPUP' :
+        return setTablePopup(state, action.payload);
     default:
         return state;
     }
@@ -155,11 +153,7 @@ function applyChangesToTableCell(
     return onChange(state, newMainState, true);
 }
 
-/**
- * Applies the given URL to the current content selection in multi-line quote block.
- * If the selection is a link, it applies the link to the entity instead.
- */
-const applyLinkToMultiLineQuote = (state, {link, entity}: {link: ILink, entity: EntityInstance}) =>
+const applyLinkOnTableCell = (state, {link, entity}: {link: ILink, entity: EntityInstance}) =>
     applyChangesToTableCell(state, (editorState) =>
         entity
             ? entityUtils.replaceSelectedEntityData(editorState, {link})
@@ -167,9 +161,9 @@ const applyLinkToMultiLineQuote = (state, {link, entity}: {link: ILink, entity:
     );
 
 /**
- * Removes the link on the entire entity under the cursor in multi-line quote block.
+ * Removes the link on the entire entity under the cursor in table cell.
  */
-const removeLinkInMultiLineQuote = (state) => {
+const removeLinkInTableCell = (state) => {
     const {activeCell, editorState: mainEditorState} = state;
 
     if (activeCell === null) {
@@ -343,16 +337,13 @@ const setPopup = (state: IEditorStore, {type, data}) => {
 
 type PopupType = keyof typeof PopupTypes;
 
-const setMultiLinePopup = (state: IEditorStore, {type, data}: {type: PopupType, data: SelectionState }) =>
+const setTablePopup = (state: IEditorStore, {type, data}: {type: PopupType, data: SelectionState }) =>
     processCells(
         state,
-        (cells, numCols, numRows, i, j, withHeader, currentStyle, selection) => {
-            const newData = {cells, numRows, numCols, withHeader};
-
+        (tableData, _activeCell) => {
             return {
-                ...state,
+                data: tableData,
                 popup: {type, data},
-                data: newData,
             };
         },
     );
@@ -412,9 +403,4 @@ function changeCase(state: IEditorStore, payload: {changeTo: ITextCase, selectio
     return onChange(state, EditorState.forceSelection(nextEditorState, selection));
 }
 
-const setCustomToolbar = (state: IEditorStore, style: IEditorStore['customToolbarStyle']): IEditorStore => ({
-    ...state,
-    customToolbarStyle: style,
-});
-
 export default toolbar;
diff --git a/scripts/core/editor3/store/index.ts b/scripts/core/editor3/store/index.ts
index bbab6ce484..3f3caf3c87 100644
--- a/scripts/core/editor3/store/index.ts
+++ b/scripts/core/editor3/store/index.ts
@@ -34,7 +34,7 @@ import {appConfig} from 'appConfig';
 import {
     formattingOptionsUnsafeToParseFromHTML,
 } from 'apps/workspace/content/components/get-content-profiles-form-config';
-import {RICH_FORMATTING_OPTION, IActiveCell, IArticle, IDesk} from 'superdesk-api';
+import {RICH_FORMATTING_OPTION, IArticle} from 'superdesk-api';
 import {
     CharacterLimitUiBehavior,
     DEFAULT_UI_FOR_EDITOR_LIMIT,
@@ -43,6 +43,7 @@ import {getMiddlewares} from 'core/redux-utils';
 import {getTextLimitHighlightDecorator} from '../components/text-length-overflow-decorator';
 import {CompositeDecoratorCustom} from './composite-decorator-custom';
 import {IAcceptSuggestion} from '../components/spellchecker/SpellcheckerContextMenu';
+import {IActiveCell} from '../components/tables/TableBlock';
 
 export const ignoreInternalAnnotationFields = (annotations) =>
     annotations.map((annotation) => pick(annotation, ['id', 'type', 'body']));
@@ -69,7 +70,7 @@ interface IProps {
 export interface IEditorStore {
     editorState: EditorState;
     searchTerm: { pattern: string; index: number; caseSensitive: boolean };
-    popup: { type: any };
+    popup: { type: any; data?: any };
     readOnly: boolean;
     locked: boolean;
     showToolbar: any;
@@ -78,7 +79,6 @@ export interface IEditorStore {
     tabindex: any;
     showTitle: any;
     activeCell?: IActiveCell;
-    customToolbarStyle?: 'table' | 'multiLineQuote';
     editorFormat: Array<RICH_FORMATTING_OPTION>;
     onChangeValue: any;
     item: any;
diff --git a/scripts/core/editor3/styles.scss b/scripts/core/editor3/styles.scss
index e3dced3553..daab8a2bd3 100644
--- a/scripts/core/editor3/styles.scss
+++ b/scripts/core/editor3/styles.scss
@@ -43,7 +43,7 @@ $editor-styleButton-size: 			3rem;
 	}
 }
 
-.main-article {
+.main-article, .main-editor-3-style {
 	.Editor3-root {
 		border: 1px solid $editor-neutral-border;
 		font-weight: 300;
@@ -97,6 +97,10 @@ $editor-styleButton-size: 			3rem;
 			.link-toolbar.empty {
 				display: none;
 			}
+
+			&.floating-toolbar-invisible {
+				visibility: hidden;
+			}
 		}
 
 		&.read-only {
@@ -260,6 +264,10 @@ $editor-styleButton-size: 			3rem;
 				}
 			}
 
+			.DraftEditor-editorContainer [data-block="true"]:only-child {
+				border-bottom-width: 0em!important; // removing border that is usually added for drag and drop support
+			}
+
 			&__controls {
 				margin-block-end: 6px;
 
diff --git a/scripts/core/helpers/utils.tsx b/scripts/core/helpers/utils.tsx
index a64fdd8975..745482aacb 100644
--- a/scripts/core/helpers/utils.tsx
+++ b/scripts/core/helpers/utils.tsx
@@ -31,6 +31,10 @@ export function pick<T extends IOnlyStringKeys, K extends keyof T>(obj: T, ...ke
     return picked;
 }
 
+export function getObjectEntriesGeneric<KEY extends string, VALUE>(obj: any): Array<[KEY, VALUE]> {
+    return Object.entries(obj) as Array<[KEY, VALUE]>;
+}
+
 // type-safe alternative to lodash.omit
 export function omit<T extends IOnlyStringKeys, K extends keyof T>(obj: T, ...keysToOmit: Array<K>): Omit<T, K> {
     const keys = new Set<string>();
diff --git a/scripts/core/superdesk-api.d.ts b/scripts/core/superdesk-api.d.ts
index e7469c4465..bcc7f34efa 100644
--- a/scripts/core/superdesk-api.d.ts
+++ b/scripts/core/superdesk-api.d.ts
@@ -1442,7 +1442,80 @@ declare module 'superdesk-api' {
         [key: string]: any;
     }
 
-    export interface IVocabulary extends IBaseRestApiResponse {
+    interface IVocabularyEditorBlock extends IVocabularyStandard {
+        field_type: 'editor-block';
+        field_options?: {
+            formatting_options?: Array<string>;
+            template?: [import('draft-js').RawDraftContentState];
+        };
+    }
+
+    export interface IVocabularyRelatedContent extends IVocabularyStandard {
+        field_type: 'related_content';
+        field_options?: {
+            allowed_types?: {
+                picture?: boolean;
+                audio?: boolean;
+                video?: boolean;
+            };
+            allowed_workflows?: {
+                in_progress?: boolean;
+                published?: boolean;
+            };
+            multiple_items?: {enabled: boolean; max_items: number};
+        };
+    }
+
+    interface IVocabularyText extends IVocabularyStandard {
+        field_type: 'text';
+        field_options?: {
+            single?: boolean;
+        }
+    }
+
+    export interface IVocabularyMedia extends IVocabularyStandard {
+        field_type: 'media';
+        field_options?: {
+            allowed_types?: {
+                picture?: boolean;
+                audio?: boolean;
+                video?: boolean;
+            };
+            allowed_workflows?: {
+                in_progress?: boolean;
+                published?: boolean;
+            };
+            multiple_items?: {enabled: boolean; max_items: number};
+        };
+    }
+
+    interface IVocabularyDate extends IVocabularyStandard {
+        field_type: 'date';
+    }
+
+    interface IVocabularyEmbed extends IVocabularyStandard {
+        field_type: 'embed';
+    }
+
+    interface IVocabularyUrls extends IVocabularyStandard {
+        field_type: 'urls';
+    }
+
+    interface IVocabularyCustom extends IVocabularyStandard {
+        field_type: 'custom';
+    }
+
+    export type IVocabulary =
+        IVocabularyEditorBlock
+        | IVocabularyRelatedContent
+        | IVocabularyText
+        | IVocabularyMedia
+        | IVocabularyDate
+        | IVocabularyEmbed
+        | IVocabularyUrls
+        | IVocabularyCustom;
+
+    interface IVocabularyStandard extends IBaseRestApiResponse {
         _deleted: boolean;
         display_name: string;
         helper_text?: string;
@@ -1462,28 +1535,8 @@ declare module 'superdesk-api' {
                 [key: string]: string;
             };
         };
+        field_type: null;
         schema: {};
-        field_type:
-            | 'text'
-            | 'media'
-            | 'date'
-            | 'embed'
-            | 'urls'
-            | 'related_content'
-            | 'custom';
-        field_options?: { // Used for related content fields
-            allowed_types?: {
-                picture?: boolean;
-                audio?: boolean;
-                video?: boolean;
-            };
-            allowed_workflows?: {
-                in_progress?: boolean;
-                published?: boolean;
-            };
-            multiple_items?: { enabled: boolean; max_items: number };
-            single?: boolean; // used for custom text fields
-        };
         custom_field_type?: string;
         custom_field_config?: { [key: string]: any };
         date_shortcuts?: Array<{ value: number; term: string; label: string }>;
@@ -1494,10 +1547,10 @@ declare module 'superdesk-api' {
         selection_type?: 'single selection' | 'multi selection' | 'do not show';
     }
 
-    export interface IArticleField extends IVocabulary {
+    export type IArticleField = {
         single?: boolean;
         preview?: boolean;
-    }
+    } & IVocabulary;
 
     export type IContentProfileEditorConfig = {
         [key: string]: {
@@ -2298,7 +2351,8 @@ declare module 'superdesk-api' {
         'tab as spaces' |
         'undo' |
         'redo' |
-        'multi-line quote';
+        'multi-line quote' |
+        'custom blocks';
 
     export interface IEditor3HtmlProps {
         value: string;
@@ -2315,19 +2369,6 @@ declare module 'superdesk-api' {
         editorFormat?: Array<RICH_FORMATTING_OPTION>;
     }
 
-    export interface IActiveCell {
-        i: number; // row
-        j: number; // column
-        key: string;
-        currentStyle: Array<string>;
-        selection: import('draft-js').SelectionState;
-    }
-
-    export interface ISetActiveCellReturnType {
-        type: 'EDITOR_SET_CELL';
-        payload: IActiveCell;
-    }
-
     export type IAuthoringField =
         {
             type: 'plain-text';
diff --git a/scripts/core/ui/components/ListPage/generic-list-page-item-view-edit.tsx b/scripts/core/ui/components/ListPage/generic-list-page-item-view-edit.tsx
index a81076ef3d..e62d2d1c96 100644
--- a/scripts/core/ui/components/ListPage/generic-list-page-item-view-edit.tsx
+++ b/scripts/core/ui/components/ListPage/generic-list-page-item-view-edit.tsx
@@ -219,7 +219,10 @@ export class GenericListPageItemViewEdit<T> extends React.Component<IProps<T>, I
                     {
                         this.props.editMode
                             ? (
-                                <div className="side-panel__sliding-toolbar side-panel__sliding-toolbar--right">
+                                <div
+                                    className="side-panel__sliding-toolbar side-panel__sliding-toolbar--right"
+                                    data-test-id="toolbar"
+                                >
                                     <button
                                         className="btn"
                                         onClick={this.handleCancel}
diff --git a/scripts/core/ui/components/ListPage/generic-list-page.tsx b/scripts/core/ui/components/ListPage/generic-list-page.tsx
index 67c47b5443..ffcc4a775d 100644
--- a/scripts/core/ui/components/ListPage/generic-list-page.tsx
+++ b/scripts/core/ui/components/ListPage/generic-list-page.tsx
@@ -464,7 +464,15 @@ export class GenericListPageComponent<T, P>
         const showPagination = this.props.crudManager._meta.total > this.props.crudManager._items.length;
 
         return (
-            <div style={{display: 'flex', flexDirection: 'column', width: '100%', height: '100%'}}>
+            <div
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    width: '100%',
+                    height: '100%',
+                }}
+                data-test-id="generic-list-page"
+            >
                 <OnlyWithChildren wrapper={subNavWrapper}>
                     {
                         this.props.disallowFiltering ? null : (
diff --git a/scripts/core/ui/components/generic-form/input-types/select_multiple_values.tsx b/scripts/core/ui/components/generic-form/input-types/select_multiple_values.tsx
index 6fc12c6dc4..f08efa1434 100644
--- a/scripts/core/ui/components/generic-form/input-types/select_multiple_values.tsx
+++ b/scripts/core/ui/components/generic-form/input-types/select_multiple_values.tsx
@@ -5,9 +5,14 @@ import {TreeSelect} from 'superdesk-ui-framework/react';
 
 type IProps = IInputType<Array<string>>;
 
+interface IOption {
+    id: string;
+    label: string;
+}
+
 export class SelectMultipleValues extends React.Component<IProps> {
     render() {
-        const items: Array<{id: string; label: string}> = this.props.formField.component_parameters.items;
+        const items: Array<IOption> = this.props.formField.component_parameters.items;
 
         if (this.props.previewOutput) {
             if (this.props.value == null) {
@@ -27,6 +32,12 @@ export class SelectMultipleValues extends React.Component<IProps> {
             }
         }
 
+        const optionsLookup = new Map<string, IOption>();
+
+        for (const item of items) {
+            optionsLookup.set(item.id, item);
+        }
+
         return (
             <div
                 className={
@@ -55,12 +66,13 @@ export class SelectMultipleValues extends React.Component<IProps> {
                     onChange={(item) => {
                         this.props.onChange(item.map(({id}) => id));
                     }}
-                    value={items.filter(({id}) => (this.props.value ?? []).includes(id))}
+                    value={(this.props.value ?? []).map((id) => optionsLookup.get(id))}
                     disabled={this.props.disabled}
                     label={this.props.formField.label}
                     inlineLabel
                     labelHidden
                     zIndex={1051}
+                    data-test-id={this.props.formField.component_parameters?.dataTestId}
                 />
 
                 {
diff --git a/scripts/core/ui/components/generic-form/tests/generic-form.spec.tsx b/scripts/core/ui/components/generic-form/tests/generic-form.spec.tsx
index 98ffaa1784..9a0c1caf8f 100644
--- a/scripts/core/ui/components/generic-form/tests/generic-form.spec.tsx
+++ b/scripts/core/ui/components/generic-form/tests/generic-form.spec.tsx
@@ -76,7 +76,7 @@ describe('generic form', () => {
                             formField={getTestFieldConfig(type)}
                             formValues={{}}
                             disabled={false}
-                            value=""
+                            value={undefined}
                             issues={[message]}
                             previewOutput={false}
                             onChange={noop}
@@ -115,7 +115,7 @@ describe('generic form', () => {
                             formField={{...getTestFieldConfig(type), required: true}}
                             formValues={{}}
                             disabled={false}
-                            value=""
+                            value={undefined}
                             issues={[]}
                             previewOutput={false}
                             onChange={noop}
diff --git a/scripts/core/ui/ui.ts b/scripts/core/ui/ui.ts
index 6e5c33f970..645816c9ec 100644
--- a/scripts/core/ui/ui.ts
+++ b/scripts/core/ui/ui.ts
@@ -1293,7 +1293,7 @@ export default angular.module('superdesk.core.ui', [
         'sdFormattingOptionsTreeSelect',
         reactToAngular1(
             FormattingOptionsTreeSelect,
-            ['value', 'fieldId', 'fields', 'onChange'],
+            ['value', 'onChange', 'options'],
         ),
     )
 
diff --git a/styles/sass/app.scss b/styles/sass/app.scss
index 85bf096baf..c1bb5b22a6 100644
--- a/styles/sass/app.scss
+++ b/styles/sass/app.scss
@@ -74,3 +74,5 @@
 // Proofreading Modal
 @import '../../scripts/apps/authoring-react/toolbar/proofreading.scss';
 @import '../../scripts/apps/authoring-react/toolbar/theme-selector.scss';
+
+@import '../../scripts/core/editor3/components/custom-block.scss';