Add success notice style (#5242

* Add success notice style

* Move quote styling closer to notices
Improving parsing of notices when pasting from other tools

shared/editor/components/Styles.ts

@@ -651,9 +651,23 @@ h6 {
   }
 }
 
+.notice-block.success {
+  background: ${transparentize(0.9, props.theme.noticeSuccessBackground)};
+  border-left: 4px solid ${props.theme.noticeSuccessBackground};
+  color: ${props.theme.noticeSuccessText};
+
+  .icon {
+    color: ${props.theme.noticeSuccessBackground};
+  }
+
+  a {
+    color: ${props.theme.noticeSuccessText};
+  }
+}
+
 blockquote {
   margin: 0;
-  padding-left: 1.5em;
+  padding: 8px 10px 8px 1.5em;
   font-style: italic;
   overflow: hidden;
   position: relative;

shared/editor/nodes/Notice.tsx

@@ -1,5 +1,5 @@
 import Token from "markdown-it/lib/token";
-import { WarningIcon, InfoIcon, StarredIcon } from "outline-icons";
+import { WarningIcon, InfoIcon, StarredIcon, DoneIcon } from "outline-icons";
 import { wrappingInputRule } from "prosemirror-inputrules";
 import { NodeSpec, Node as ProsemirrorNode, NodeType } from "prosemirror-model";
 import * as React from "react";
@@ -14,6 +14,7 @@ export default class Notice extends Node {
     return Object.entries({
       info: this.options.dictionary.info,
       warning: this.options.dictionary.warning,
+      success: this.options.dictionary.success,
       tip: this.options.dictionary.tip,
     });
   }
@@ -47,6 +48,28 @@ export default class Notice extends Node {
               ? "tip"
               : dom.className.includes("warning")
               ? "warning"
+              : dom.className.includes("success")
+              ? "success"
+              : undefined,
+          }),
+        },
+        // Quill editor parsing
+        {
+          tag: "div.ql-hint",
+          preserveWhitespace: "full",
+          getAttrs: (dom: HTMLDivElement) => ({
+            style: dom.dataset.hint,
+          }),
+        },
+        // GitBook parsing
+        {
+          tag: "div.alert.theme-admonition",
+          preserveWhitespace: "full",
+          getAttrs: (dom: HTMLDivElement) => ({
+            style: dom.className.includes("warning")
+              ? "warning"
+              : dom.className.includes("success")
+              ? "success"
               : undefined,
           }),
         },
@@ -75,6 +98,8 @@ export default class Notice extends Node {
             component = <StarredIcon />;
           } else if (node.attrs.style === "warning") {
             component = <WarningIcon />;
+          } else if (node.attrs.style === "success") {
+            component = <DoneIcon />;
           } else {
             component = <InfoIcon />;
           }