►
Description
In this video, we review the lessons earned from implementing a proof of concept of a WYSIWYG editor using CKeditor5 framework.
A
A
A
A
That
this
proof
of
concept
is
based
on
what
we
wanted
to
evaluate
with
the
proof
of
concept.
Was
the
term
determining
what
is
the
payload
size
of
a
nature
that
is
built
with
the
with
creator
if
it
is
possible
to
to
create
to
have
multiple
instances
of
editor?
In
the
same
context,
evaluating
how
the
data
behaves
in
mobile
devices
in
small
screens
and
then
two
advanced
use
cases
are
very
specific
to
a
static
site
ether.
A
There
is
a
implementing
a
visualizer
for
a
template,
a
syntax
within
marketing
documents,
for
example.
One
common
example
in
the
handbook
is
embedding
erb
called
the
snippets.
I
wouldn't
mark
that
document
and
the
other
one
is
a
switching
between
that
we
see
weak
and
from
markdown
modes
and
return
retaining
the
crucial
selection,
something
that
that
is
a
bug
that
we
haven't
been
able
to
fix
with
our
customer
solutions.
A
So,
before
jumping
right
into
the
code,
let
me
show
you:
I
implemented
this,
this
proof
of
concept
in
gitlab
ui.
The
advantage
of
implementing
it
in
gitlab
ui
is
that
we
have
access
to
the
to
history
book,
and
this
is
a
a
a
very
convenient
environment
to
implement
a
proper
concept,
because
each
of
the
evaluation
criterias
have
their
own
story.
A
A
So
first
I
opened
the
review
up.
You
can
open
this
merch
request
in
and
then
go
to
the
to
a
review
app
that
will
open
a
version
of
history
book
that
that
contains
the
the
stories
that
are
implemented,
which
is
very
convenient
if
you
don't
want
to
check
out
this
branch
locally,
and
I
create
these
five
stories
that
that
match
each
of
the
evaluation
criterias
that
I
that
I
talked
about
earlier
and
within
those
those
stories.
A
A
So
let
me
give
a
little
bit
of
context
about
the
the.
How
secateur
provides
this
kind
of
functionality.
Cigarette
provides
two
type
of
usages.
The
first
one
is
is
the
the
preview
versions
of
editor
they
create
some.
They
create
five
version
operator
that
provide
different
type
of
of
user
experience.
A
The
first
one
is
a
classic
editor.
That
is
the
one
that
we
were
seeing
the
in
the
history
book,
where
you
have
the
the
common
experience
of
a
text
box
here
a
text
area,
and
then
you
have
a
toolbar
with
all
the
features
that
editor
provides.
But
then
you
have
other
types
of
field
like
the
inline
editor,
where
you,
where,
basically
you
can
have
these
text
boxes
that
has
a
flooring
toolbar
on
top
and
the
volumeter.
A
That
is
a
the
one
that
we
were
talking
about,
where
you
can
have
a
toolbar
for
each
of
the
blocks
within
the
the
contains.
The
the
other
type
of
of
development
experience
is
using
a
framework.
This
is
the
one
that
we
are
interested
about
and
it's
like,
basically,
each
of
these
pieces
of
functionality
that
the
version
of
theater
provides.
A
A
First,
we
have
this.
This
default
view
I
implemented.
I
I
stored
it
with
with
multiple
instances,
and
the
idea
was
testing
if
we
could
like
do
actually
do
this,
it's
a
very
simple
one
and
it's
pretty
much
multiple
instances
of
the
same
nature,
and
there
is
not
much
else
to
say,
but
the
the
idea
is
demonstrating
that
it
is
possible
and
it
is
actually
possible.
A
A
A
A
So
it's
probably
something
that
that
they,
I
think
that
we
can
actually
do
it,
but
usually
they.
The
flexibility
that
the
editor
provides
to
the
in
tables
is
can
be,
can
be
a
liability
for
us,
because
if
we
cannot
do
things
like,
oh,
we
can
do
things
in
data
like
inserting
a
list
within
a
table,
but
this
is
not
a
picture
that
that
common
mark
provides.
A
Caveat
the
fourth
story
is
about
displaying
code
snippets
inserted
in
markdown,
I'm
gonna
speak.
I'm
gonna
talk
a
bit
more
about
how
we
implemented
that,
but
basically
we
could.
We
can
implement
extensions
in
data
that
allows
to
to
identify
these
code
snippets
that
are
not
part
of
the
common
market
spec
and
and
then
display
them
in
a
specific
way.
A
In
this
case,
I
just
made
a
very
simple
visualizer
that
is
displaying
this
called
the
snippets
as
code
blocks,
but
at
some
point
I
guess
that
we
would
want
to
perhaps
interact
with
them
and
open
if
they
are
referencing
a
template.
We
can.
We
could
open
that
template
dynamically
and
things
like
that,
and
all
of
that
is
possible
with
the
with
aether
architecture.
A
Yes,
pretty
much,
you
can
you
do
it,
identify
these
code
blocks
and
then
you,
you
create
some
categories
for
you,
you
extended
the
document
schema.
The
document
schema
is
basically
like
saying:
hey,
we
have
a
document
and
the
document
can
have
a
paragraph
and
can
have
lists.
The
perhaps
list
cannot
have
a
block
quote
inside
them
and
the
schema
is
a
data
structure
that
creates
those
constraints
constraints
within
the
document.
A
So
you
could
say
hey.
We
will
have
this
kind
of
code
blocks
within
data
in
in
the
schema
and
say
well,
these
code
blocks
won't
be
editable
and
that's
one
of
the
you
know
of
the
features
that
provide
the
the
document
schema.
Creating
that
kind
of
constraints.
You
can
also
say
that
it
is
not
draggable.
You
can
say
that
it
is
not
nested
within
a
specific
element.
A
A
A
A
A
A
That
is
like
embed
an
embedded
erb
within
a
link
as
us
normal
text,
that
is,
that
has
an
added
an
attribute
that
is
called
that
embed
code,
and
that
is
a
plugin
that
that
I
actually
implemented
to
check
when
we
are
just
displaying
embedded
embedded
code
within
a
markdown
document.
So
this
was
very
useful
and
it's
like
a
a
pretty
good
tool
to
to
debug
what
we
are
doing
while
implementing
features.
A
A
So,
jumping
back
into
the
code,
I
added
all
of
these
packages
to
the
to
the
to
the
participation
as
dependencies
and
then
I
had
to
add
a
custom
markdown
parser
that
I
used
to
to
implement
the
extension
to
recognize
the
erb
syntax
within
during
the
within
the
marketing
documents.
I'm
gonna
talk
a
bit
more
about
remark,
but
basically
we
are
using
a
separate
markdown
parser.
Instead
of
providing
of
using
the
the
package
that
creator
5
provides
because
that
one
is
not
it's
not
accessible.
A
What,
in
my
opinion,
is
one
of
the
biggest
disadvantages
and
something
that
probably
want
to
discuss
with
the
ck-13
tomorrow
the
ether
is
quite
heavy,
even
the
the
the
core
of
the
engine,
the
the
corvette,
or
that
is
the
the
most
basic
part,
is
like
it
it.
It
requires
a
lot
of
bandwidth
to
download
because
it
has
a
big
size
and,
besides
that
this
one
this
starts
here.
Let
me
see
if
this
well,
this
finished
almost
finished.
A
So
we
could
say
that
we
could
build
a
lighter
version
of
the
of
the
eighth
or,
if
we
remove
plugins
like
the
table,
one
that
is
like
two
266
kilobytes
and
the
image
one.
But
those
are
essential
features
that
we
probably
cannot
use.
We
cannot
just
not
include
because
they
are
essential
part
of
the
operator
and
probably
if
we
want
to
use
this,
we
segregate
or
in
a
in
in
a
different
context
like
using
it
for
for
the
comment
section.
A
B
Sorry,
eric
okay,
dumb
question
on
my
part
in
in
the
scenario
of
using
multiple
instances
of
the
ck
editor.
Is
that,
like
three
times
the
file
weight
size
on
the
page
or
is
it
just
like
it
gets
loaded
once
and
it's
just
creates?
A
new
like
is
every
instance
resulting
like,
like
whatever
the
g
sub
size
is
like
500
kbs
of.
A
No,
it's
just
it
just
repeat:
we
only
load
the
assets
once
and
then
each
instance
of
the
iterations
are
it
just
takes
the
space
in
memory
of
that
of
that
instance
of
that
object,
objective
memory.
So
it's
not!
It's
not
like
duplicating
the
this
one
are
like
more
like
the
physical
assets
that
are
downloaded
and
after
that
each
instance
represents
just
like
some
prone
time.
It
just
takes
a
space
from
the
from
the
runtime
member.
C
That
made
me
think
now
that,
apart
from
the
initial
payload,
it
would
be
good
to
see
you
know
how
much
memory
an
instance
takes
up.
You
know,
especially
if,
if
we
think
about
wanting
to
enable
some
an
editor
on
commons
and
somebody
is
viewing
an
issue
on
their
mobile
phone
with
like
hundreds
of
instances,
that
might
be
quite
you
know
bad
experience
if,
if
it's
not
done
intelligently
to
not
be
in
all
of
those
instances
in
memory.
A
That's
right,
what
I
imagining
is
is
some
nurse
request
with
50
conversations
after
15
or
50
notes,
and
by
error
we
decided
to
create
an
instance
for
each
of
them.
I
think
that
the
the
best
way
of
structuring
that
is
trying
to
have
a
simulator
of
the
a
single
instance
of
eight
or
as
much
as
possible,
but
I
think
that
is
a
another,
something
else
that
we
we
should
measure
as
well.
A
A
A
Besides
that,
I
think
that,
from
the
from
the
point
of
view
of
the
of
the
code,
what
what
is
more
more
interesting
because
the
the
mobile
view,
the
multiple
instances
and
all
of
this
structure
around
the
classic
editor,
is
something
that
is
out
of
the
box.
I
didn't
implement
anything
important
or
anything
thickness,
significant
other
other
than
assembling
all
of
the
parts
and
including
them.
I'm
gonna
show
you
quickly
that
so
pretty
much.
A
Here
and
then
after
including
all
of
those
packages,
I
created
a
an
instance
of
a
of
the
classic
editor
and
I
included
all
of
the
plugins.
So
that's
a
the
easier
part.
The
the
the
easy
part,
the
the
mo
the
the
complex
part
of
the
proof
of
concept,
is
implementing
the
recognizing
the
the
erb
templates
and
and
displaying
them
in
data.
A
A
A
A
That
is
the
the
whole
markdown
document,
and
then
this
paragraph
will
become
a
will,
become
a
node
and
a
separate
entry,
and
the
type
will
be
a
paragraph,
and
this
one
will
become
another
paragraph,
and
that,
though,
will
have
some
children
and
those
children
will
be
an
html,
an
inline
html,
and
besides
that
it
will
have
a
an
inline
erb
code
snippet.
So
that's
it.
The
for
the
whole
purpose
of
the
markdown
parser
and
after
we
create
that
structured
version
of
the
markdown
document.
A
A
It's
basically
a
tokenizer
is
like
a
a
function
that
is
accepting
the
raw
marginal
document
and
then
is
iterating
through
all
of
the
character
and
implementing
a
function
that
that
we've
recognized
within
that
cross
string
when,
where
a
year
because
block
starts
and
where
it
ends.
So
we
would
have
to
implement
this
kind
of
parser
of
tokenizer
function
to
attack
all
kinds
of
the
the
custom
template
synthesis.
We
want
to
to
provide
some
custom
visualizations
within
the
green
data.
A
I
don't
want
to
go
through
the
the
actual
implementation,
but
basically
that
that
is
like
you
create
that
function.
You
specify
to
it
to
the
parser,
hey
you're,
going
to
have
a
a
block
here
b
and
an
inline
inline
your
b
tokenizers
and-
and
you
have
to
specify
some
priority
in
this
case.
I
said:
hey,
I
want
you,
the
only
the
only
tokenizer
that
is
more
important
than
you
is
is
text.
A
So
if
that
text,
organizer
is
not
recognizing
something
that
that
that
it
can
consume,
then
all
of
the
content
will
be
scanned
by
the
erb
tokenizer.
In
that
way,
we
can
extract
the
year
b.
Call
the
snippets
before
other
tokenizers
can
recognize
other
types
of
syntax
like
we
want
to
recognize
the
code
snippets
that
are
inside
the
html.
A
A
A
I
want
you
to
generate
this
kind
of
html
and
the
html
is
basically
a
bread,
a
protag
that
we
have
an
attribute.
That
is
called
that
embedded
code
and
inside
that
that
pre-attack
it
will
have
a
code,
one
that
is
marked
with
year
b
and
that
will
that
will
be
the
the
html
that
the
heater
will
consume
and
until
that
that's
great,
but
then
we
need
even
another
step
to
compare
that
html
to
something
that
the
cka
tour
can
can
interpret.
A
A
A
A
So
this
plugin
is
extending
the
schema
to
say:
hey,
you
will
have
text
that
will
have
an
attribute
called
data
embedded
code
and
that
will
help
to
help
us
to
identify
the
the
year.
We
call
the
snippets
and
there
is
a
plugin,
the
code
block
plugin.
That
is
what
we
are
using
here,
but
that
well
let
me
show
you,
I
always
opened
the
the
wrong
thing.
A
So
cicada
provides
the
code
block
plugin.
That
represents
a
a
specific
structure
within
the
within
the
the
document
schema,
and
it
allows
a
single
attribute,
the
language
one
and
it's
used
to
displace
this
this
little
tag
here,
but
we
wanted
to
reuse
this
plugin
and
and
we
needed
an
extra
attribute
to
detect.
If
we
are
just
displaying
a
code
block,
there
is
actually
an
embedded
template
syntax
within
the
document,
so
we
extended
the
the
codeblock
schema
to
support
that
new
attribute
that
new
flag.
A
Here's
a
the
way
that
we
are
sending
that,
after
that,
we
need
to
indicate
ck8
or
how
it
will
come
compared
that
eight
row
html
to
the
to
these
models
here
and
that's
a
concept
that
creator
called
of
casting
and
casting
is
basically
saying:
hey.
You
will
find
a
code
html
tag
and
it
will
have
that
embedded
code
attribute.
A
A
So
what
is
the
the
general
the
general
outtakes
of
this?
We
will
like
this
is
a
representation
of
this
architecture
like
this
is
a
a
concrete
implementation
story
of
that
of
these
of
this
diagram.
Here
we
are
using
a
rich
contaminator
with
a
custom
document
model
that
we
have
to
convert
back
to
html
and
we
are
using
the
unified
platform
to
to
breach
to
create
a
bridge
between
the
data
and
the
markdown
parser
that
is
converting
back
and
forth
between
html
and
markdown.
B
D
A
Yes,
I
did.
It
is
that's
what
that
was
one
of
them
of
the
most
challenging
parts
of
implementing
the
proof
of
concept
and
the
closer
position.
Look,
I'm
gonna
select
one
part
of
the
text
and
you
can
go
to
the
to
the
selection
part
in
the
development
in
the
developer
tools,
and
you
can
see
all
of
the
information
about
the
selection.
You
can
see
where
it
starts.
Where
it
ends
you
can
see,
then
what
are
the
attributes
and
what
is
the
formatting
of
the
text
that
you
selected?
A
So
it's
it's
incredibly
powerful
and
the
data
structure
the
way
that
cigarette
restructures,
the
the
selection
is
it's
as
a
tree,
because
let
me
see
here
in
the
in
the
path.
Let's
say
that
I
that
I
come
here
the
path
property
here
says
it
is
a
a
topple
of
well.
It
has.
The
first
dimension
is
zero,
and
that
represents
the
first
block
here,
the
first
paragraph
and
the
the
second
part.
A
The
second
dimension
represents
the
the
position
where
you
are
within
that
block,
so
you
could
be
064
and
it
is
the
same
case
for
the
for
the
second.
For
the
second
block,
it's
like
well,
first
dimension,
second
dimension,
third
dimension,
but
there
is
a
space
between
between
those
paragraphs
and
ck83
is
not
counting
that
it's
not
counting.
That's,
as
I
mentioned.
A
If
you
go
to
this
to
the
raw
version,
you
have
actually
one
two
three
four
lines,
so
you
have
to
find
a
way
of
mapping
that
tree
and
that
that
structure
to
something
that
is
completely
different
and
that's
the
challenging
part
of
of
handling
that
the
conversion
between
the
the
course
or
even
in
the
text
area
and
the
and
the
rich
content
editor,
but
it
gets
even
more
complicated.
If
you
go
to
a
code
block,
you
get
a
third
dimension,
so
you
have
to
are
in
the
third
block
in
the
first
character.
A
A
B
C
B
A
A
A
Complicated
well,
I
guess
we
could
find
a
solution
at
some
point
but
yeah.
This
is
the.
This
is
the
the
core
part
of
the.
Hopefully,
this
demonstrates
the
the
capabilities
of
seacreator
and
we
can
how
we
can
combine
all
of
the
elements
to
achieve
the
our
goal
of
displaying.
These
are
complex,
markdown.
D
C
A
Yes,
so
the
well,
I'm
gonna
share
my
my
screen
again,
because
I
think
that
my
my
comments
can
benefit
from
that.
The
the
framework,
the
signature
figure,
has
a
an
extensive
documentation
of
the
architecture
and
some
examples
about
how
to
do
these
conversions,
but
those
examples
and
that
information,
even
though
it's
very
useful,
to
understand
how
data
is
created
in
some
cases.
It's
not
specific
enough.
It
was
not
explicit
specific
enough
for
me
to
understand
how
I
could
achieve
the
the
things
that
I
achieved
in
the
fruitful
concept.
A
A
So
I
had
to
go
to
the
api
documentation
and
say
hey.
Then
let
me
see
if
there
is
some
examples
here
in
the
conversion
document
and
try
to
find
trying
to
find
code
examples
in
the
api,
and
that
was
not
always
immediately
easy
like
it
would
be.
It
wouldn't
be
helpful,
so
the
apis
is
extremely
complex.
A
A
That
was
evident
by
just
looking
at
the
documentation
and
looking
at
the
other
picture.
Well
and
all
of
this
there
were
other
times.
For
example,
I
thought
that
this
features
section
here
represented
something
that
that
was
oriented
to
to
a
stakeholder
to
someone
who
is
making
business
decisions,
so
they
could
see
what
data
was
capable
of
those.
This
is
also
in
api
for
the
regular
documentation.