Feature/kcl 767 collaborative editing new

.gitignore

@@ -8,3 +8,4 @@ npm-debug.log
 !website/static/
 yarn-error.log
 .DS_Store
+.idea

examples/draft-0-10-0/kentico/RichEditor.css

@@ -0,0 +1,333 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates. All rights reserved.
+ *
+ * This file provided by Facebook is for non-commercial testing and evaluation
+ * purposes only. Facebook reserves all rights not expressly granted.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
+ * ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+.RichEditor-root {
+  background: #fff;
+  border: 1px solid #ddd;
+  font-family: 'Georgia', serif;
+  font-size: 14px;
+  padding: 15px;
+}
+
+.RichEditor-editor {
+  border-top: 1px solid #ddd;
+  cursor: text;
+  font-size: 16px;
+  margin-top: 10px;
+}
+
+.RichEditor-editor .public-DraftEditorPlaceholder-root,
+.RichEditor-editor .public-DraftEditor-content {
+  margin: 0 -15px -15px;
+  padding: 15px;
+}
+
+.RichEditor-editor .public-DraftEditor-content {
+  min-height: 100px;
+}
+
+.RichEditor-hidePlaceholder .public-DraftEditorPlaceholder-root {
+  display: none;
+}
+
+.RichEditor-editor .RichEditor-blockquote {
+  border-left: 5px solid #eee;
+  color: #666;
+  font-family: 'Hoefler Text', 'Georgia', serif;
+  font-style: italic;
+  margin: 16px 0;
+  padding: 10px 20px;
+}
+
+.RichEditor-editor .public-DraftStyleDefault-pre {
+  background-color: rgba(0, 0, 0, 0.05);
+  font-family: 'Inconsolata', 'Menlo', 'Consolas', monospace;
+  font-size: 16px;
+  padding: 20px;
+}
+
+.RichEditor-controls {
+  font-family: 'Helvetica', sans-serif;
+  font-size: 14px;
+  margin-bottom: 5px;
+  user-select: none;
+}
+
+.RichEditor-styleButton {
+  color: #999;
+  cursor: pointer;
+  margin-right: 16px;
+  padding: 2px 0;
+  display: inline-block;
+}
+
+.RichEditor-activeButton {
+  color: #5890ff;
+}
+
+.docs p {
+  line-height: 20px;
+}
+
+div[data-block] + div[data-block] {
+  margin-top: 10px;
+}
+
+.rte__kentico {
+  color: white;
+  background-color: #f05a22;
+  white-space: pre-wrap;
+}
+
+.rte__kentico-programmatic {
+  border-radius: 0.5em;
+  padding-right: 0.5em;
+  padding-left: 0.5em;
+  border-bottom-left-radius: 0;
+}
+
+.rte__kentico + .rte__kentico {
+  border-top-left-radius: 0;
+  padding-left: 0;
+  margin-left: -0.5em;
+}
+
+.rte__highlight {
+  background-image: linear-gradient(rgba(255, 255, 0, 0.5), rgba(255, 255, 0, 0.5));
+}
+
+.block--is-empty div[data-offset-key] {
+  max-width: 4px;
+}
+
+.block--is-empty span[data-offset-key] {
+  display: block;
+  width: 4px;
+  overflow: hidden;
+}
+
+/* Collaboration */
+span.leaf--has-caret span[data-text] {
+  // TODO - Use none here after the cursor is rendered only for the last character in leaf
+  user-select: text;
+}
+
+span.leaf--has-caret span[data-text]:after,
+.block--has-caret:before {
+  content: "\200C";
+  outline: solid 1px transparent;
+  position: absolute;
+}
+
+:root {
+  --authorA-color: rgb(139, 69, 19);
+  --authorA-color-60: rgba(139, 69, 19, 0.6);
+  --authorA-color-15: rgba(139, 69, 19, 0.15);
+
+  --authorB-color: rgb(0, 180, 0);
+  --authorB-color-60: rgba(0, 180, 0, 0.6);
+  --authorB-color-15: rgba(0, 180, 0, 0.15);
+
+  --authorC-color: rgb(0, 100, 0);
+  --authorC-color-60: rgba(0, 100, 0, 0.6);
+  --authorC-color-15: rgba(0, 100, 0, 0.15);
+
+  --authorD-color: rgb(0, 128, 255);
+  --authorD-color-60: rgba(0, 128, 255, 0.6);
+  --authorD-color-15: rgba(0, 128, 255, 0.15);
+
+  --authorE-color: rgb(255, 128, 0);
+  --authorE-color-60: rgba(255, 128, 0, 0.6);
+  --authorE-color-15: rgba(255, 128, 0, 0.15);
+
+  --authorF-color: rgb(128, 0, 255);
+  --authorF-color-60: rgba(128, 0, 255, 0.6);
+  --authorF-color-15: rgba(128, 0, 255, 0.15);
+
+  --authorG-color: rgb(255, 0, 0);
+  --authorG-color-60: rgba(255, 0, 0, 0.6);
+  --authorG-color-15: rgba(255, 0, 0, 0.15);
+
+  --authorH-color: rgba(0, 0, 255, 0.6);
+  --authorH-color-60: rgba(0, 0, 255, 0.6);
+  --authorH-color-15: rgba(0, 0, 255, 0.15);
+}
+
+/* A */
+span.leaf--has-caret.caret--user-A span[data-text]:after {
+  outline-color: var(--authorA-color-60);
+}
+
+.block--has-caret.caret--user-A:before {
+  outline-color: var(--authorA-color-60);
+}
+
+span.leaf--has-selection.selection--user-A {
+  background-color: var(--authorA-color-15);
+}
+
+.block--is-empty .block--has-selection.selection--user-A span[data-offset-key] {
+  background-color: var(--authorA-color-15);
+}
+
+span.author--A {
+  border-bottom: solid 3px var(--authorA-color) !important;
+}
+
+/* B */
+span.leaf--has-caret.caret--user-B span[data-text]:after {
+  outline-color: var(--authorB-color-60);
+}
+
+.block--has-caret.caret--user-B:before {
+  outline-color: var(--authorB-color-60);
+}
+
+span.leaf--has-selection.selection--user-B {
+  background-color: var(--authorB-color-15);
+}
+
+.block--is-empty .block--has-selection.selection--user-B span[data-offset-key] {
+  background-color: var(--authorB-color-15);
+}
+
+span.author--B {
+  border-bottom: solid 3px var(--authorB-color) !important;
+}
+
+/* C */
+span.leaf--has-caret.caret--user-C span[data-text]:after {
+  outline-color: var(--authorC-color-60);
+}
+
+.block--has-caret.caret--user-C:before {
+  outline-color: var(--authorC-color-60);
+}
+
+span.leaf--has-selection.selection--user-C {
+  background-color: var(--authorC-color-15);
+}
+
+.block--is-empty .block--has-selection.selection--user-C span[data-offset-key] {
+  background-color: var(--authorC-color-15);
+}
+
+span.author--C {
+  border-bottom: solid 3px var(--authorC-color) !important;
+}
+
+/* D */
+span.leaf--has-caret.caret--user-D span[data-text]:after {
+  outline-color: var(--authorD-color-60);
+}
+
+.block--has-caret.caret--user-D:before {
+  outline-color: var(--authorD-color-60);
+}
+
+span.leaf--has-selection.selection--user-D {
+  background-color: var(--authorD-color-15);
+}
+
+.block--is-empty .block--has-selection.selection--user-D span[data-offset-key] {
+  background-color: var(--authorD-color-15);
+}
+
+span.author--D {
+  border-bottom: solid 3px var(--authorD-color) !important;
+}
+
+/* E */
+span.leaf--has-caret.caret--user-E span[data-text]:after {
+  outline-color: var(--authorE-color-60);
+}
+
+.block--has-caret.caret--user-E:before {
+  outline-color: var(--authorE-color-60);
+}
+
+span.leaf--has-selection.selection--user-E {
+  background-color: var(--authorE-color-15);
+}
+
+.block--is-empty .block--has-selection.selection--user-E span[data-offset-key] {
+  background-color: var(--authorE-color-15);
+}
+
+span.author--E {
+  border-bottom: solid 3px var(--authorE-color) !important;
+}
+
+/* F */
+span.leaf--has-caret.caret--user-F span[data-text]:after {
+  outline-color: var(--authorF-color-60);
+}
+
+.block--has-caret.caret--user-F:before {
+  outline-color: var(--authorF-color-60);
+}
+
+span.leaf--has-selection.selection--user-F {
+  background-color: var(--authorF-color-15);
+}
+
+.block--is-empty .block--has-selection.selection--user-F span[data-offset-key] {
+  background-color: var(--authorF-color-15);
+}
+
+span.author--F {
+  border-bottom: solid 3px var(--authorF-color) !important;
+}
+
+/* G */
+span.leaf--has-caret.caret--user-G span[data-text]:after {
+  outline-color: var(--authorG-color-60);
+}
+
+.block--has-caret.caret--user-G:before {
+  outline-color: var(--authorG-color-60);
+}
+
+span.leaf--has-selection.selection--user-G {
+  background-color: var(--authorG-color-15);
+}
+
+.block--is-empty .block--has-selection.selection--user-G span[data-offset-key] {
+  background-color: var(--authorG-color-15);
+}
+
+span.author--G {
+  border-bottom: solid 3px var(--authorG-color) !important;
+}
+
+/* H */
+span.leaf--has-caret.caret--user-H span[data-text]:after {
+  outline-color: var(--authorH-color-60);
+}
+
+.block--has-caret.caret--user-H:before {
+  outline-color: var(--authorH-color-60);
+}
+
+span.leaf--has-selection.selection--user-H {
+  background-color: var(--authorH-color-15);
+}
+
+.block--is-empty .block--has-selection.selection--user-H span[data-offset-key] {
+  background-color: var(--authorH-color-15);
+}
+
+span.author--H {
+  border-bottom: solid 3px var(--authorH-color) !important;
+}