feat: Notice blocks available as new editor options (#1371)

* feat: Notice blocks available as new editor options

* fix: styling tweak
feat: Add shortcut to keyboard modal

* add notices to welcome docs

* styling tweaks

* styling tweaks

* styling tweaks

app/components/DocumentPreview/DocumentPreview.js

@@ -82,6 +82,7 @@ const Heading = styled.h3`
   margin-bottom: 0.25em;
   overflow: hidden;
   white-space: nowrap;
+  color: ${props => props.theme.text};
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;

app/components/Editor.js

@@ -88,10 +88,16 @@ const StyledEditor = styled(RichMarkdownEditor)`
     transition: ${props => props.theme.backgroundTransition};
   }
 
+  .notice-block.tip,
+  .notice-block.warning {
+    font-weight: 500;
+  }
+
   p {
     a {
       color: ${props => props.theme.link};
       border-bottom: 1px solid ${props => lighten(0.5, props.theme.link)};
+      text-decoration: none !important;
       font-weight: 500;
 
       &:hover {

app/scenes/KeyboardShortcuts.js

@@ -139,6 +139,10 @@ function KeyboardShortcuts() {
           <Key>{"```"}</Key>
         </Keys>
         <Label>Code block</Label>
+        <Keys>
+          <Key>{":::"}</Key>
+        </Keys>
+        <Label>Info notice</Label>
 
         <Keys>_italic_</Keys>
         <Label>Italic</Label>

package.json

@@ -121,7 +121,7 @@
     "mobx-react": "^5.4.2",
     "natural-sort": "^1.0.0",
     "nodemailer": "^4.4.0",
-    "outline-icons": "^1.18.0",
+    "outline-icons": "^1.19.0",
     "oy-vey": "^0.10.0",
     "pg": "^6.1.5",
     "pg-hstore": "2.3.2",
@@ -141,7 +141,7 @@
     "react-portal": "^4.0.0",
     "react-router-dom": "^5.1.2",
     "react-waypoint": "^9.0.2",
-    "rich-markdown-editor": "^10.4.0-1",
+    "rich-markdown-editor": "^10.4.0",
     "semver": "^7.3.2",
     "sequelize": "^5.21.1",
     "sequelize-cli": "^5.5.0",
@@ -191,4 +191,4 @@
     "js-yaml": "^3.13.1"
   },
   "version": "0.45.0"
-}
+}

server/onboarding/📝 Our Editor.md

@@ -6,7 +6,10 @@ If you’re comfortable writing markdown then all of the shortcuts you are used
 
 ![The formatting toolbar](/images/screenshots/formatting-toolbar.png)
 
-*Tip:* You can also paste markdown or html from elsewhere directly into a document.
+:::info
+You can also paste markdown or html from elsewhere directly into a document.
+:::
+
 
 ## Rich documents
 

server/onboarding/🚀 Integrations & API.md

@@ -4,7 +4,10 @@ Outline supports many of the most popular tools on the market without any additi
 
 Our integration code is also [open-source](https://github.com/outline/outline) and we encourage third party developers and the community to build support for additional tools! 
 
-*Tip:* Most integrations work by simply pasting a link from a supported service into a document.
+:::info
+Most integrations work by simply pasting a link from a supported service into a document.
+:::
+
 
 ## Slack
 

shared/styles/globals.js

@@ -53,7 +53,6 @@ export default createGlobalStyle`
     line-height: 1.25;
     margin-top: 1em;
     margin-bottom: 0.5em;
-    color: ${props => props.theme.text};
   }
   h1 { font-size: 2.25em; }
   h2 { font-size: 1.5em; }

shared/styles/theme.js

@@ -26,10 +26,19 @@ const colors = {
   yellow: "#FBCA04",
   warmGrey: "#EDF2F7",
 
-  danger: "#D0021B",
+  danger: "#ff476f",
   warning: "#f08a24",
   success: "#2f3336",
   info: "#a0d3e8",
+
+  brand: {
+    red: "#FF5C80",
+    pink: "#FF4DFA",
+    purple: "#9E5CF7",
+    blue: "#3633FF",
+    marine: "#2BC2FF",
+    green: "#42DED1",
+  },
 };
 
 const spacing = {
@@ -81,6 +90,11 @@ export const base = {
   blockToolbarHoverBackground: colors.slateLight,
   blockToolbarDivider: colors.slateLight,
 
+  noticeTipBackground: colors.brand.purple,
+  noticeTipText: colors.white,
+  noticeWarningBackground: colors.danger,
+  noticeWarningText: colors.white,
+
   breakpoints: {
     mobile: 0, // targeting all devices
     tablet: 737, // targeting devices that are larger than the iPhone 6 Plus (which is 736px in landscape mode)
@@ -137,6 +151,9 @@ export const light = {
   codeBorder: colors.smokeDark,
   embedBorder: "#DDD #DDD #CCC",
   horizontalRule: colors.smokeDark,
+
+  noticeInfoBackground: colors.warmGrey,
+  noticeInfoText: colors.almostBlack,
 };
 
 export const dark = {
@@ -189,6 +206,9 @@ export const dark = {
   codeString: "#3d8fd1",
   embedBorder: colors.black50,
   horizontalRule: darken(0.2, colors.slate),
+
+  noticeInfoBackground: colors.white10,
+  noticeInfoText: colors.almostWhite,
 };
 
 export default light;

yarn.lock

@@ -6432,6 +6432,11 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+markdown-it-container@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/markdown-it-container/-/markdown-it-container-3.0.0.tgz#1d19b06040a020f9a827577bb7dbf67aa5de9a5b"
+  integrity sha512-y6oKTq4BB9OQuY/KLfk/O3ysFhB3IMYoIWhGJEidXt1NQFocFK2sA2t0NYZAMyMShAGL6x5OPIbrmXPIqaN9rw==
+
 markdown-it-mark@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/markdown-it-mark/-/markdown-it-mark-3.0.0.tgz#27c3e39ef3cc310b2dde5375082c9fa912983cda"
@@ -7166,10 +7171,10 @@ osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
-outline-icons@^1.15.0, outline-icons@^1.18.0:
+outline-icons@^1.19.0, outline-icons@^1.19.1:
-  version "1.18.0"
+  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.18.0.tgz#2f128d668b0874725b5c0656a04fd73a7f8fe418"
+  resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.19.1.tgz#5251b966ae9987b18f060b58ce469d248c2313aa"
-  integrity sha512-odEYBLN+zFcTDhfs4af2RHUGneQBYbVgaBuI/I30BLaJQsKT2jBw2Shjie/HR8MYpZtgMwixP51XPPlGBSIqgw==
+  integrity sha512-YeGLDG7KgBvrDy+WOQUqN8rD3qO5u524E0Wj6ejaWNQ8/1ou6kkUrx65mk8LtESfKLMWZHuQG/u6onurY9rKIw==
 
 oy-vey@^0.10.0:
   version "0.10.0"
@@ -8599,15 +8604,16 @@ retry-as-promised@^3.2.0:
   dependencies:
     any-promise "^1.3.0"
 
-rich-markdown-editor@^10.4.0-1:
+rich-markdown-editor@^10.4.0:
-  version "10.4.0-1"
+  version "10.4.0"
-  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-10.4.0-1.tgz#1f5dc63262b0bcae4d94e83ec9076dd229a8e199"
+  resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-10.4.0.tgz#0a31401cf3f3356c0f365607fba0fd28a8b05da4"
-  integrity sha512-donV4yFbS9fCdWhWYI70xo+hbkxdBbYGJKEg3NcnhkdZ7NbE6Cn4R3JmSdg7BpBgIM/7H+UMWqUV5M9vJHaLHQ==
+  integrity sha512-vLghzLnat13TE7xbY2vOENoH3iifO8Z+J8FQ0W2SP4wcL6pqwgMvDSsmVKuEEbh5E9zRwAcsqFybH985Zqg1tQ==
   dependencies:
     copy-to-clipboard "^3.0.8"
     lodash "^4.17.11"
+    markdown-it-container "^3.0.0"
     markdown-it-mark "^3.0.0"
-    outline-icons "^1.15.0"
+    outline-icons "^1.19.1"
     prismjs "^1.19.0"
     prosemirror-commands "^1.1.4"
     prosemirror-dropcursor "^1.3.2"