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
This commit is contained in:
Tom Moor
GitHub
parent
710fcc697c
commit
70e1194f90
|
|
@ -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;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -6,7 +6,10 @@ If you’re comfortable writing markdown then all of the shortcuts you are used
|
|||
|
||||
|
||||
|
||||
*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
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
24
yarn.lock
24
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:
|
||||
version "1.18.0"
|
||||
resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.18.0.tgz#2f128d668b0874725b5c0656a04fd73a7f8fe418"
|
||||
integrity sha512-odEYBLN+zFcTDhfs4af2RHUGneQBYbVgaBuI/I30BLaJQsKT2jBw2Shjie/HR8MYpZtgMwixP51XPPlGBSIqgw==
|
||||
outline-icons@^1.19.0, outline-icons@^1.19.1:
|
||||
version "1.19.1"
|
||||
resolved "https://registry.yarnpkg.com/outline-icons/-/outline-icons-1.19.1.tgz#5251b966ae9987b18f060b58ce469d248c2313aa"
|
||||
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:
|
||||
version "10.4.0-1"
|
||||
resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-10.4.0-1.tgz#1f5dc63262b0bcae4d94e83ec9076dd229a8e199"
|
||||
integrity sha512-donV4yFbS9fCdWhWYI70xo+hbkxdBbYGJKEg3NcnhkdZ7NbE6Cn4R3JmSdg7BpBgIM/7H+UMWqUV5M9vJHaLHQ==
|
||||
rich-markdown-editor@^10.4.0:
|
||||
version "10.4.0"
|
||||
resolved "https://registry.yarnpkg.com/rich-markdown-editor/-/rich-markdown-editor-10.4.0.tgz#0a31401cf3f3356c0f365607fba0fd28a8b05da4"
|
||||
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"
|
||||
|
|
|
|||
Reference in New Issue