Implement the do–it–yourself type of an editor #873

oleq · 2018-03-06T16:40:24Z

This kind of editor is required for us to showcase the document editor (build) like we used to in v4.

UI

This kind of editor (creator) will not render per se but instead provide the crucial building blocks for the developers to use in their application, e.g.:

toolbar view
editable view

They will be available as editor.ui.view.toolbar and editor.ui.view.editable, where the editor.ui.view is a direct, element–less extension of the EditorUIView class.

Data

The editor will not replace an existing DOM element but it will obtain the initial data as an argument.

Config

The editor will support a configuration allowing a quicker configuration (positioning) of the UI elements in DOM, e.g. (config names WIP):

config = {
    ...
    ui: {
        toolbarContainer: document.querySelector( 'div.some-div' ),
        editableContainer: document.querySelector( 'main' )
    },
    ...
}

The above will basically do the following:

document.querySelector( 'div.some-div' ).appendChild( editor.ui.view.toolbar.element );
document.querySelector( 'main' ).appendChild( editor.ui.view.editable.element );

once they are ready.

Naming

That's the biggest problem so far. The name should express the nature of the editor — it provides the building blocks bound together as a whole (which is easy for developers) but does not force any DOM structure.

Ideas so far:

DIYEditor,
AssembledEditor,
ComposedEditor,
DetachedEditor,
BricksEditor

The text was updated successfully, but these errors were encountered:

Reinmar · 2018-03-06T16:49:17Z

Assembled and Composed 👎 – semantically, nothing's composed or assembled there.

DIY 👍 – it best describes what it is, but I'm not sure whether the DIY is well known.

Detached 👎 – this is not the right word – "detached" is about https://github.com/ckeditor/ckeditor5-core/issues/64.

Bricks – quite fine; but DIY works better for me.

Reinmar · 2018-03-06T17:04:58Z

More proposals (not saying that any good, but let's see):

ComponentsEditor (as: editor exposing UI components)
CustomEditor (problem: "custom editor" ~= "custom build")

Reinmar · 2018-03-06T17:05:44Z

cc @wojtekidd @AnnaTomanek @wwalc

oleq · 2018-03-07T09:43:10Z

https://www.collinsdictionary.com/dictionary/english/flat-pack?

Reinmar · 2018-03-07T10:14:42Z

That's not a very common idiom and I wouldn't know myself what it means. It wouldn't also ring any (correct) bells in my head.

pjasiun · 2018-03-07T10:20:41Z

👍 for BricksEditor, DIYEditor

wojtekidd · 2018-03-07T10:24:08Z

ComponentsEditor seems cool.

DIYEditor sounds a bit shabby IMO. DIY has sometimes these connotations like handmade and also the DIY ethic

Other options:
CustomizedEditor
PersonalizedEditor
BespokeEditor as in bespoke solution

pjasiun · 2018-03-07T10:26:48Z

BespokeEditor is also cool :)

jodator · 2018-03-07T10:26:59Z

I'm for DIYEditor - the BricksEditor is not revealing enough. Also no for BespokeEditor (I had to google it :P )

Also this editor looks like a FinishMeEditor (AlmostReadyEditor ?) also a WireframeEditor.

jodator · 2018-03-07T10:28:50Z

After googling might be: https://en.wikipedia.org/wiki/Custom_software.

TailorMadeEditor (from wiki page linked above).

Edit: less cool: DedicatedEditor...

scofalik · 2018-03-07T10:34:59Z

Please, do not go with DIYEditor. Just, please. Trust @wojtekidd if you do not trust me. This does not sound good, really.

Reinmar · 2018-03-07T10:36:17Z

TailorMade and Bespoke have those connotations that this is ready to use and made precisely for you. While this creator is not about this. It's the fabric, the material you can use.

PS. MaterialEditor :D

pjasiun · 2018-03-07T10:43:53Z

TailorMade and Bespoke have those connotations that this is ready to use and made precisely for you. While this creator is not about this. It's the fabric, the material you can use.

No one expects, that the editor you downloaded from the CDN/website/npm is already tailored. This should be clear to everybody that we do not read your mind and if you need something tailored you need to do some final steps.

I really like Bespoke because it has no bad connotation. That is true that BricksEditor sounds like BlockEditor and one may imagine something similar to the classic editor. With Bespoke you will have a good connotation or no at all if you do not know what does Bespoke means, but no connotations are better than bad connotations. Also, Bespoke is pretty unique what is always nice about naming things.

Reinmar · 2018-03-07T10:49:39Z

Yeah, I changed my mind. In this specific context people should not be confused.

So, I'd personally choose from these two:

BespokeEditor
ComponentsEditor

wwalc · 2018-03-07T10:56:20Z

+0.5 BespokeEditor

scofalik · 2018-03-07T10:57:24Z

My suggestions:

DecoupledEditor - because UI/DOM elements are decoupled and you provide container,
Attachable(Classic)Editor - because UI/DOM are attached to provided containers,

Or make it a flag in ClassicEditor (replaceElement: true/false).

jodator · 2018-03-07T10:59:15Z

After thinking of WireframeEditor:

BlueprintEditor

wojtekidd · 2018-03-07T11:00:37Z

DecoupledEditor seems also OK to me, but I might not understand the context fully ;)

oleq · 2018-03-07T13:43:31Z

Or make it a flag in ClassicEditor (replaceElement: true/false).

It does not make sense because CE imports certain UI classes that render the UI + behaviors like the sticky toolbar. It's a totally different kind of editor.

Reinmar · 2018-03-07T14:07:15Z

Additionally, https://github.com/ckeditor/ckeditor5-core/issues/64 is just a completely different scenario. You can have no replacing and still have the classic UI.

oleq · 2018-03-07T14:08:37Z

Maybe we could refer to the state of the UI here? E.g. RenderlessEditor, BoxlessEditor, LooseEditor, ArrangelessEditor, UnanchoredEditor.

oleq · 2018-03-07T14:13:29Z

Maybe PartialEditor? Devs are used to the concept of partials.

jodator · 2018-03-07T14:25:38Z

Huh... IKEAEditor - you have all the parts but you have to properly arrange & connected them...

wojtekidd · 2018-03-07T14:29:59Z

LooseEditor is nice - also building on this UnboundEditor ApartEditor UnattachedEditor UnleashedEditor UnrestrainedEditor

scofalik · 2018-03-07T14:51:08Z

I once again propose DecoupledEditor. Look. In every other editor the UI is linked (coupled) with editable:

classic - it is above the editing area,
inline - it sticks to the editing area,
balloon - it shows when you select something in the editing area.

In DecoupledEditor (or DecoupledUIEditor) the UI is completely decoupled from editing. It makes sense, really. Let's go for it.

wwalc · 2018-03-07T14:51:19Z

I'd be careful with proposing too complicated/long names (e.g. UnrestrainedEditor) to not end up with TaumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahuEditor (something too hard to type without a mistake).

Reinmar · 2018-03-07T15:12:31Z

One more idea – GenericEditor.

Reinmar · 2018-03-07T15:13:59Z

Or UniversalEditor. Or BlankEditor. These are potential synonyms for Generic.

oleq · 2018-03-07T15:26:16Z

Generic/Universal suggests some general/universal feature set instead of focusing on the flexibility of the UI.

Reinmar · 2018-03-07T15:38:03Z

I think that if we'll be that pedantic, then we won't find any name ;) Sure this word can be understood this way. But pretty much any word here can be misleading. Every word suggests something. But you need to stay at least a bit open when you learn about these things.

For now, the only other name I liked was BespokeEditor and DIYEditor. The latter is very precise. The former is quite good too, but its biggest strength is that it has very little connotations. It keeps your mind open until you learn what that thing really is. It even has this kind of proper name feeling.

Reinmar · 2018-03-07T15:41:03Z

In other words, let's try to find a "good enough" name. Something easy, not overengineered, not overthought, not confusing, and not too popular (so it doesn't appear too often in other contexts in our docs)

Reinmar · 2018-03-08T11:15:08Z

OK, so, let's sum this up.

We've got two proposals:

DecoupledEditor – because its UI is decoupled into parts.
GenericEditor – because it allows you to create (pretty much) every kind of editor.

Let's have the final vote:

👍 if you want DecoupledEditor
👎 if you want GenericEditor

oleq · 2018-03-08T13:25:24Z

It's DecoupledEditor then. Thanks for your votes!

Question about the configuration. ATM I resurrected the ui namespace in the config:

DecoupledEditor
	.create( '<p>foo</p>', {
		plugins: [
			...
		],
		image: {
			toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
		},
		ui: {
			toolbarContainer: '.doc-editor__top',
			editableContainer: '.doc-editor__editable'
		},
		toolbar: [
			'headings', '|', 'fontsize', 'fontfamily', '|',
			...
		]
	} )

we could go deeper

DecoupledEditor
	.create( '<p>foo</p>', {
		plugins: [
			...
		],
		image: {
			toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
		},
		ui: {
			decoupled: {
				toolbarContainer: '.doc-editor__top',
				editableContainer: '.doc-editor__editable'
			}
		},
		toolbar: [
			'headings', '|', 'fontsize', 'fontfamily', '|',
			...
		]
	} )

or quite the opposite

DecoupledEditor
	.create( '<p>foo</p>', {
		plugins: [
			...
		],
		image: {
			toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
		},
		decoupled: { // ?
			toolbarContainer: '.doc-editor__top',
			editableContainer: '.doc-editor__editable'
		},
		toolbar: [
			'headings', '|', 'fontsize', 'fontfamily', '|',
			...
		]
	} )

or even

DecoupledEditor
	.create( '<p>foo</p>', {
		plugins: [
			...
		],
		image: {
			toolbar: [ 'imageStyleFull', 'imageStyleSide' ]
		},
		toolbarContainer: '.doc-editor__top',
		editableContainer: '.doc-editor__editable',
		toolbar: [
			'headings', '|', 'fontsize', 'fontfamily', '|',
			...
		]
	} )

Which one is best?

scofalik · 2018-03-08T13:29:26Z

It's DecoupledEditor then. Thanks for your votes!

🎉

As far as config is concerned, I am for toolbarContainer and editableContainer straight in the top-level of config (so last option).

pjasiun · 2018-03-08T13:34:26Z

I would not put decoupled in the config so 1 and 4 are fine for me.

Feature: The first implementation of the decoupled editor. Closes #1. Closes ckeditor/ckeditor5#873.

…itor/ckeditor5-build-decoupled-document`. See #874 and #873.

oleq added status:discussion type:feature This issue reports a feature request (an idea for a new functionality or a missing option). candidate:1.0.0 package:ui labels Mar 6, 2018

oleq added this to the iteration 15 milestone Mar 6, 2018

oleq self-assigned this Mar 6, 2018

oleq mentioned this issue Mar 6, 2018

Create a document editor example (and a build) #874

Closed

Reinmar modified the milestones: iteration 15, iteration 14 Mar 6, 2018

oleq mentioned this issue Mar 9, 2018

t/1: The first implementation of the decoupled editor ckeditor/ckeditor5-editor-decoupled#2

Merged

Reinmar closed this as completed in ckeditor/ckeditor5-editor-decoupled#2 Mar 13, 2018

Reinmar added a commit to ckeditor/ckeditor5-editor-decoupled that referenced this issue Mar 13, 2018

Merge pull request #2 from ckeditor/t/1

a1950e8

Feature: The first implementation of the decoupled editor. Closes #1. Closes ckeditor/ckeditor5#873.

Reinmar added a commit that referenced this issue Mar 13, 2018

Feature: Introduced @ckeditor/ckeditor5-editor-decoupled and `@cked…

1930514

…itor/ckeditor5-build-decoupled-document`. See #874 and #873.

pomek added package:editor-decoupled and removed package:editor-* labels Oct 8, 2019

oleq mentioned this issue Oct 8, 2019

Implement the decoupled editor #2240

Closed

Implement the do–it–yourself type of an editor #873

Implement the do–it–yourself type of an editor #873

Comments

oleq commented Mar 6, 2018

UI

Data

Config

Naming

Reinmar commented Mar 6, 2018

Reinmar commented Mar 6, 2018

Reinmar commented Mar 6, 2018

oleq commented Mar 7, 2018

Reinmar commented Mar 7, 2018

pjasiun commented Mar 7, 2018

wojtekidd commented Mar 7, 2018

pjasiun commented Mar 7, 2018

jodator commented Mar 7, 2018

jodator commented Mar 7, 2018 • edited Loading

scofalik commented Mar 7, 2018

Reinmar commented Mar 7, 2018 • edited Loading

pjasiun commented Mar 7, 2018 • edited Loading

Reinmar commented Mar 7, 2018

wwalc commented Mar 7, 2018

scofalik commented Mar 7, 2018 • edited Loading

jodator commented Mar 7, 2018

wojtekidd commented Mar 7, 2018

oleq commented Mar 7, 2018

Reinmar commented Mar 7, 2018

oleq commented Mar 7, 2018 • edited Loading

oleq commented Mar 7, 2018

jodator commented Mar 7, 2018 • edited Loading

wojtekidd commented Mar 7, 2018

scofalik commented Mar 7, 2018

wwalc commented Mar 7, 2018 • edited Loading

Reinmar commented Mar 7, 2018

Reinmar commented Mar 7, 2018 • edited Loading

oleq commented Mar 7, 2018

Reinmar commented Mar 7, 2018

Reinmar commented Mar 7, 2018

Reinmar commented Mar 8, 2018 • edited Loading

oleq commented Mar 8, 2018

scofalik commented Mar 8, 2018 • edited Loading

pjasiun commented Mar 8, 2018

jodator commented Mar 7, 2018 •

edited

Loading

Reinmar commented Mar 7, 2018 •

edited

Loading

pjasiun commented Mar 7, 2018 •

edited

Loading

scofalik commented Mar 7, 2018 •

edited

Loading

oleq commented Mar 7, 2018 •

edited

Loading

jodator commented Mar 7, 2018 •

edited

Loading

wwalc commented Mar 7, 2018 •

edited

Loading

Reinmar commented Mar 7, 2018 •

edited

Loading

Reinmar commented Mar 8, 2018 •

edited

Loading

scofalik commented Mar 8, 2018 •

edited

Loading