►
From YouTube: FE Pairing - 20210813 - Add ToC Content Editor Extension
Description
In this session we pair up on adding a "Table of Contents" extension to GitLab's new WYSIWYG Content Editor.
Issue: https://gitlab.com/gitlab-org/gitlab/-/issues/338270
MR: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/68210
A
C
D
E
E
Only
what
you
define
can
be
added
like
if
you
say
that
a
bullet
list
can
only
have
list
items,
so
that's
the
rule
and
no
one
can
break
that,
but
in
action
html
you
can
have
tables
inside
lists
inside
tables
and
whatnot,
so
that
makes
it
very
prone
to
bugs
so
by
having
something
that
is
restricted
by
a
schema.
That
is
very
useful
for
us.
Also
like
you
cannot.
E
D
Exactly
and
the
the
library
that
that
we
are
using,
as
you
might
you
said,
is
pros
meter
and
they
provide
support
for
mark
them
for
certain
elements
in
in
gitlab,
flavor
markdown,
like
git
flow
heat,
lock,
flavor
markdown,
is
a
super
set
of
common
mark.
That
is,
you
know,
like
the
the
specification
for
markdown
and
mark,
has
specifications
for
headings
and.
F
D
But
it
doesn't
have
any
specification
for
tables,
so
we
need
to
implement
to
extend
cross
meter
to
know
how
to
generate
markdown
for
tables
and-
and
there
are
other
elements
like
gitlab
flavor
markdown-
support,
audio
video
support,
collapsible
content,
support
definition
list.
All
of
that.
None
of
that
is
a
standard,
higher
standard
fixtures
of
markdown.
So
now
we
have
to
write
serializers,
that's
how
we
call
it
call
them
to
generate
markdowns
for
those
content,
types
from
the
content,
editor.
E
E
A
Yeah,
I've
just
found
an
extension
that
looks
slightly
non-trivial
and
I
see
it's
like
extending
a
base
extension
so
because
we
had
like
some
specific
behavior
that
we
here,
I
guess
so.
It's
correct
me
if
I'm
wrong,
but
this
epic
is
just
a
matter
of
making
sure
that
we
can
support
all
of
the
gfm
content
by
adding
extensions
for
these
certain
types
of
nodes
marks,
whatever
they're
called
okay
cool,
and
so
we've
got
a
couple
of
them
already.
F
E
A
A
D
A
E
D
A
A
D
D
D
B
A
C
B
Now
we'll
see
what
happens,
I
mean
interesting
all
the
patches
that
they're
making
to
get
and
yeah
to
stop
when
we're,
pushing
and
raising
mrs
at
the
moment,
there's
some
yeah,
some
real
real
performance
issues
that
preventing
community
folks
from
raising
their
miles
from
forks
and
stuff,
but
apparently
there's
some
bonkers
behavior
that
goes
on
when
you,
when
you
push
and
that
basically
like
walks
like
two
million
refs
and
stuff,
like
that,
that's
just
yeah.
I
don't
know
how
people
work
on
bigger
projects
than
git
lab.
A
B
F
B
A
E
A
F
A
F
E
A
Yeah,
I
I
thought
I
wasn't
sure
either
that's
why
it
was.
I
tried
that
out
because
I
was
like,
oh,
I
don't
know,
what's
going
to
happen
with
this
edge
case,
but
this
is
the
syntax
right,
yeah,
that's
right,
and
what
what
we
would.
Let
me
save
this,
but
what
we
need
to
have
happen
is
if
I
switch
to
using
the
new
editor,
somehow
we
are
either
presenting
it
or
something
so,
but
right
now
just
kind
of
doing
something.
D
A
E
A
F
A
E
E
A
A
E
A
A
A
A
A
A
A
D
G
C
A
A
F
F
E
Yeah
yeah,
when
you
press
backspace,
if
you
delete
the
entire
thing
it's
gone,
yeah
you
can
undo
to
bring
it
back.
Yep,
yeah
yeah.
It
works
for
the
most
part
that
it's
a
single
entity.
Now
all
you
need
to
do
is
instead
of
having
this
phrase
or
table
of
contents,
you
need
to
have
the
actual
elements
instead
of
the
table
of
contents
itself,.
A
D
E
A
A
D
Do
it
way
easier
than
that
go
to
the
to
that?
The
second?
The
second
search
result
this
one
that
one
yeah
that's
like
a
helper,
where
you
can
just
like
put
the
regular
expression
on
the
and
pass
the
the
node
type
and
that's
it
like.
I
implemented
in
emoji
a
more
complex,
regular
expression,
because
I
needed
to
do
you
know
some
things,
but
all
those.
A
A
A
D
A
E
A
F
A
D
A
This
is,
this
is
very
true,
so,
yes
feel
free
to
interject
with.
If,
if
you
have
a
strong
preference
of
doing
something
different,
please
let
me
know
and
we'll
do
it
I'm
just
playing
around
so
now
I
should
be
able
to
add
one,
I'm
gonna
refresh
this,
and
now
I
should
be
able
to
from
the
markdown
editor
or
from
the
new
editor
delete
this
and
then
re-add
it
we're
talking.
A
Yes,
let's
do
that
one
thing
that
is
hard
here.
This
would
be
nice
if
I
could
see
my
cursor
like
if
I
could
see
it
go
from
before
the
table
of
contents
and
then
all
the
way
get
to
the
end
of
it,
but
like
right
now
I
don't
really
quite
know
where
I
am,
but
now
that
we're
talking
about
it.
I
see
this
weird
thing
highlighting
I
kind
of
would
expect
to
see
it
right
after
s,
but
that's
just
me
being
picky,
but
yeah.
Let's
try
the
other
way.
E
A
I
kind
of
would
like
to
see
I'm
kind
of
curious
to
know
if,
like
keeping
it
live
like
if
that
would
need
to
change
our
approach
a
bit.
I'd
almost
want
to
see
what
do
you
think
of
doing
this
for
our
next
feedback
loop?
But
what?
If
oh
gosh,
okay,
wait?
Wait?
We
really
need
to
put
this
what'd.
You
say.
D
A
A
What
do
you
think
of
tape
showing
just
table
of
contents,
but
then
with
like
a
bracket
of
how
many
headers
they
are
like?
Let's
maybe
not
worry,
about
rendering
it,
but
just
make
sure
we
can
stay
up
to
date
and
then
once
we're
like
okay,
now,
we've
got
something
happening.
That's
updating!
Now,
let's
just
write
the
pure
render
function
of
how
it
should
actually
render.
What
do
you
think
of
solving
the
updating
I'd
like
to
try
to
solve
the
updating
problem
first
and
then
we'll
render
it.
A
A
A
A
D
D
A
E
D
B
A
A
A
D
A
G
G
A
A
A
E
G
E
E
B
A
E
A
A
A
I
got
cool,
I
know
it's.
I
know
it's
that
time.
So
I'll
I'll
create
an
mr
for
this
and
push
it
up,
and
I
may
I
may
try
to
go
down
a
little
bit
of
that
tutorial
of
making
the
component
react
to
changes
and
stuff.
So
we
can
update
the
table.
Content
sounds
so
sweet
wow,
I'm
so
impressed
that
we
can
use
view
components
like
this.
That's
going
to
be
amazing,
really
cool.