Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multi-root editor implementation #13532

Merged
merged 24 commits into from
Mar 1, 2023
Merged

Multi-root editor implementation #13532

Show file tree
Hide file tree
Changes from 21 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
fa99016
Feature (multi-root-editor): Introduced multi-root editor type that a…
scofalik Feb 21, 2023
7e3bce8
Internal (build-multi-root): Added sticky toolbar implementation in t…
scofalik Feb 22, 2023
5066bf8
Docs: updated docs after introducing official multi-root editor imple…
scofalik Feb 22, 2023
102f215
Updated API docs for `DataApiMixin`.
scofalik Feb 22, 2023
62bb915
Internal (editor-multi-root): Provided JSDoc for new files.
scofalik Feb 22, 2023
f126386
Tests (find-and-replace): Used official `MultiRootEditor` in manual t…
scofalik Feb 22, 2023
009792e
Internal (build-multi-root): Fixes in sample index.html.
scofalik Feb 22, 2023
0e7d281
Docs: whitespaces.
scofalik Feb 23, 2023
18e3055
Docs (build-multi-root): Fixed snippets in README.md.
scofalik Feb 23, 2023
96ec522
Internal (build-multi-root): Updated the build.
scofalik Feb 23, 2023
afe4943
Merge branch 'master' into ck/11493
scofalik Feb 23, 2023
98af6a7
Docs (core): Updated docs for updated `EditorConfig` types.
scofalik Feb 23, 2023
0e389c9
Merge branch 'master' into ck/11493
scofalik Feb 23, 2023
fe2e192
Docs (core): small fixes in `EditorConfig` API docs.
scofalik Feb 23, 2023
93d9fff
Docs: a review.
godai78 Feb 24, 2023
ac456a5
Merge stable.
godai78 Feb 24, 2023
59a9428
Migrated multi-root editor to Typescript.
scofalik Feb 27, 2023
b7873af
Docs: Minor fixes.
scofalik Feb 28, 2023
45f87da
Add handling for `config.placeholder` specified as object in non-mult…
scofalik Feb 28, 2023
6fbf4bc
Add support for `config.placeholder` set as a string for multi-root e…
scofalik Feb 28, 2023
80acfcd
Other minor fixes for multi-root editor related changes.
scofalik Feb 28, 2023
73a5d62
Test: typo.
scofalik Feb 28, 2023
9f3b315
Added missing dependency.
scofalik Feb 28, 2023
1a30044
Fixed lint errors.
scofalik Feb 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 80 additions & 31 deletions docs/_snippets/examples/multi-root-editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,93 @@
<div id="snippet-inline-editor">
<div id="toolbar"></div>
<style>
body, html {
overflow-x: clip;
}

<header id="header">
<h2>Gone traveling</h2>
<h3>Monthly travel news and inspiration</h3>
</header>
.editor {
border: #ccced1 1px solid;
margin-top: 10px;
}

<div id="content">
<h3>Destination of the Month</h3>
.boxes {
margin-top: 10px;
display: flex;
}

<h4>Valletta</h4>
.box {
margin-top: 0px;
width: 50%;
}

<figure class="image image-style-side">
<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img/malta_2x.jpg 2x">
<figcaption>It's siesta time in Valletta.</figcaption>
</figure>
/*
Make the editable "fill" the whole box.
The box will grow if the other box grows too.
This makes the whole box "clickable".
*/
.box .ck-editor__editable {
height: 100%;
}

<p>The capital city of <a href="https://en.wikipedia.org/wiki/Malta" target="_blank" rel="external">Malta</a> is the top destination this summer. It’s home to a cutting-edge contemporary architecture, baroque masterpieces, delicious local cuisine and at least 8 months of sun. It’s also a top destination for filmmakers, so you can take a tour through locations familiar to you from Game of Thrones, Gladiator, Troy and many more.</p>
</div>
.box-left {
margin-right: 10px;
}

/*
When toolbar receives this class, it becomes sticky.
If the toolbar would be scrolled outside of the visible area,
instead it is kept at the top edge of the window.
*/
#toolbar.sticky {
position: sticky;
top: 100px;
z-index: 10;
}
</style>

<div class="demo-row">
<div class="demo-row__half">
<div id="footer-left">
<h3>The three greatest things you learn from traveling</h3>
<p><a href="#">Find out more</a></p>
<div id="toolbar"></div>
<!--
Wrapping the structure inside a pair of
contenteditable="true" + contenteditable="false" elements
is required to provide proper caret handling when
using arrow keys at the start and end of an editable area.

You can skip them if you don't want to move the
caret between editable areas using arrow keys.
!-->
<div contenteditable="true">
<div contenteditable="false">
<div class="editor">
<div id="header">
<h2>Gone traveling</h2>
<h3>Monthly travel news and inspiration</h3>
</div>
</div>
<div class="editor">
<div id="content">
<h3>Destination of the Month</h3>

<figure class="image image-style-side">
<img alt="Picture of a sunlit facade of a Maltan building." src="%BASE_PATH%/assets/img/malta.jpg" srcset="%BASE_PATH%/assets/img/malta.jpg, %BASE_PATH%/assets/img/malta_2x.jpg 2x">
<figcaption>It's siesta time in Valletta.</figcaption>
</figure>

<h4>Valletta</h4>

<div class="demo-row__half">
<div id="footer-right">
<h3>Walking the capitals of Europe: Warsaw</h3>
<p><a href="#">Find out more</a></p>
<p>The capital city of <a href="https://en.wikipedia.org/wiki/Malta" target="_blank" rel="external">Malta</a> is the top destination this summer. It’s home to cutting-edge contemporary architecture, baroque masterpieces, delicious local cuisine, and at least 8 months of sun. It’s also a top destination for filmmakers, so you can take a tour through locations familiar to you from Game of Thrones, Gladiator, Troy, and many more.</p>
</div>
</div>
<div class="boxes">
<div class="box box-left editor">
<div id="left-side">
<h3>The three greatest things you learn from traveling</h3>
<p><a href="#">Find out more</a></p>
</div>
</div>
<div class="box box-right editor">
<div id="right-side">
<h3>Walking the capitals of Europe: Warsaw</h3>
<p><a href="#">Find out more</a></p>
</div>
</div>
</div>
</div>
</div>

<style>
/* Give the toolbar some space so it does not look like it belongs to the header root only. */
#snippet-inline-editor #toolbar {
margin-bottom: 1em;
}
</style>
Loading