diff --git a/app/editor/menus/block.tsx b/app/editor/menus/block.tsx index 143c28309..26d7d6d06 100644 --- a/app/editor/menus/block.tsx +++ b/app/editor/menus/block.tsx @@ -18,6 +18,7 @@ import { AttachmentIcon, ClockIcon, CalendarIcon, + BookmarkedIcon, } from "outline-icons"; import * as React from "react"; import styled from "styled-components"; @@ -176,6 +177,13 @@ export default function blockMenuItems(dictionary: Dictionary): MenuItem[] { { name: "container_notice", title: dictionary.tipNotice, + icon: BookmarkedIcon, + keywords: "notice card suggestion", + attrs: { style: "bible" }, + }, + { + name: "container_notice", + title: dictionary.bibleNotice, icon: StarredIcon, keywords: "notice card suggestion", attrs: { style: "tip" }, diff --git a/app/hooks/useDictionary.ts b/app/hooks/useDictionary.ts index 670017490..d8492e05d 100644 --- a/app/hooks/useDictionary.ts +++ b/app/hooks/useDictionary.ts @@ -75,6 +75,8 @@ export default function useDictionary() { showSource: t("Show source"), warning: t("Warning"), warningNotice: t("Warning notice"), + bible: t("Bible"), + bibleNotice: t("Bible quote"), insertDate: t("Current date"), insertTime: t("Current time"), insertDateTime: t("Current date and time"), diff --git a/app/typings/styled-components.d.ts b/app/typings/styled-components.d.ts index 239a8e7a6..c0dc3b3bd 100644 --- a/app/typings/styled-components.d.ts +++ b/app/typings/styled-components.d.ts @@ -53,6 +53,8 @@ declare module "styled-components" { noticeTipText: string; noticeWarningBackground: string; noticeWarningText: string; + noticeBibleBackground: string; + noticeBibleText: string; } interface Colors { diff --git a/shared/editor/components/Styles.ts b/shared/editor/components/Styles.ts index 540c2f936..a9863bdca 100644 --- a/shared/editor/components/Styles.ts +++ b/shared/editor/components/Styles.ts @@ -515,6 +515,20 @@ h6 { } } +.notice-block.bible { + background: ${transparentize(0.9, props.theme.noticeBibleBackground)}; + border-left: 4px solid ${props.theme.noticeBibleBackground}; + color: ${props.theme.noticeBibleText}; + + .icon { + color: ${props.theme.noticeBibleBackground}; + } + + a { + color: ${props.theme.noticeBibleText}; + } +} + blockquote { margin: 0; padding-left: 1.5em; diff --git a/shared/editor/nodes/Notice.tsx b/shared/editor/nodes/Notice.tsx index 158a0dfb9..f297c3433 100644 --- a/shared/editor/nodes/Notice.tsx +++ b/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, BookmarkedIcon } from "outline-icons"; import { wrappingInputRule } from "prosemirror-inputrules"; import { NodeSpec, Node as ProsemirrorNode, NodeType } from "prosemirror-model"; import * as React from "react"; @@ -15,6 +15,7 @@ export default class Notice extends Node { info: this.options.dictionary.info, warning: this.options.dictionary.warning, tip: this.options.dictionary.tip, + bible: this.options.dictionary.bible, }); } @@ -47,6 +48,8 @@ export default class Notice extends Node { ? "tip" : dom.className.includes("warning") ? "warning" + : dom.className.includes("bible") + ? "bible" : undefined, }), }, @@ -75,6 +78,8 @@ export default class Notice extends Node { component = ; } else if (node.attrs.style === "warning") { component = ; + } else if (node.attrs.style === "bible") { + component = ; } else { component = ; } diff --git a/shared/styles/theme.ts b/shared/styles/theme.ts index 367e8ab9c..70066ddfd 100644 --- a/shared/styles/theme.ts +++ b/shared/styles/theme.ts @@ -87,6 +87,8 @@ export const base = { noticeTipText: colors.almostBlack, noticeWarningBackground: "#d73a49", noticeWarningText: colors.almostBlack, + noticeBibleBackground: "#996633", + noticeBibleText: colors.almostBlack, breakpoints, }; @@ -208,6 +210,7 @@ export const dark = { noticeInfoText: colors.white, noticeTipText: colors.white, noticeWarningText: colors.white, + noticeBibleText: colors.white, progressBarBackground: colors.slate, scrollbarBackground: colors.black, scrollbarThumb: colors.lightBlack,