mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: format with prettier
This commit is contained in:
swve
parent
03fb09c3d6
commit
a147ad6610
164 changed files with 11257 additions and 8154 deletions
|
|
@ -1,131 +1,220 @@
|
|||
import React from 'react'
|
||||
import { Editor } from '@tiptap/core';
|
||||
import learnhouseAI_icon from "public/learnhouse_ai_simple.png";
|
||||
import Image from 'next/image';
|
||||
import { BookOpen, FormInput, Languages, MoreVertical } from 'lucide-react';
|
||||
import { BubbleMenu } from '@tiptap/react';
|
||||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip';
|
||||
import { AIChatBotStateTypes, useAIChatBot, useAIChatBotDispatch } from '@components/Contexts/AI/AIChatBotContext';
|
||||
import { sendActivityAIChatMessage, startActivityAIChatSession } from '@services/ai/ai';
|
||||
import useGetAIFeatures from '../../../../AI/Hooks/useGetAIFeatures';
|
||||
|
||||
|
||||
import { Editor } from '@tiptap/core'
|
||||
import learnhouseAI_icon from 'public/learnhouse_ai_simple.png'
|
||||
import Image from 'next/image'
|
||||
import { BookOpen, FormInput, Languages, MoreVertical } from 'lucide-react'
|
||||
import { BubbleMenu } from '@tiptap/react'
|
||||
import ToolTip from '@components/StyledElements/Tooltip/Tooltip'
|
||||
import {
|
||||
AIChatBotStateTypes,
|
||||
useAIChatBot,
|
||||
useAIChatBotDispatch,
|
||||
} from '@components/Contexts/AI/AIChatBotContext'
|
||||
import {
|
||||
sendActivityAIChatMessage,
|
||||
startActivityAIChatSession,
|
||||
} from '@services/ai/ai'
|
||||
import useGetAIFeatures from '../../../../AI/Hooks/useGetAIFeatures'
|
||||
|
||||
type AICanvaToolkitProps = {
|
||||
editor: Editor,
|
||||
activity: any
|
||||
editor: Editor
|
||||
activity: any
|
||||
}
|
||||
|
||||
function AICanvaToolkit(props: AICanvaToolkitProps) {
|
||||
const is_ai_feature_enabled = useGetAIFeatures({ feature: 'activity_ask' });
|
||||
const [isBubbleMenuAvailable, setIsButtonAvailable] = React.useState(false);
|
||||
const is_ai_feature_enabled = useGetAIFeatures({ feature: 'activity_ask' })
|
||||
const [isBubbleMenuAvailable, setIsButtonAvailable] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (is_ai_feature_enabled) {
|
||||
setIsButtonAvailable(true);
|
||||
}
|
||||
}, [is_ai_feature_enabled])
|
||||
React.useEffect(() => {
|
||||
if (is_ai_feature_enabled) {
|
||||
setIsButtonAvailable(true)
|
||||
}
|
||||
}, [is_ai_feature_enabled])
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{isBubbleMenuAvailable && <BubbleMenu className="w-fit" tippyOptions={{ duration: 100 }} editor={props.editor}>
|
||||
<div style={{ background: 'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgba(2, 1, 25, 0.98)' }}
|
||||
className='py-1 h-10 px-2 w-max text-white rounded-xl shadow-md cursor-pointer flex items-center space-x-2 antialiased'
|
||||
>
|
||||
<div className='flex w-full space-x-2 font-bold text-white/80'><Image className='outline outline-1 outline-neutral-200/10 rounded-lg' width={24} src={learnhouseAI_icon} alt="" /> <div>AI</div> </div>
|
||||
<div>
|
||||
<MoreVertical className='text-white/50' size={12} />
|
||||
</div>
|
||||
<div className='flex space-x-2'>
|
||||
<AIActionButton editor={props.editor} activity={props.activity} label='Explain' />
|
||||
<AIActionButton editor={props.editor} activity={props.activity} label='Summarize' />
|
||||
<AIActionButton editor={props.editor} activity={props.activity} label='Translate' />
|
||||
<AIActionButton editor={props.editor} activity={props.activity} label='Examples' />
|
||||
</div>
|
||||
</div>
|
||||
</BubbleMenu>}
|
||||
</>
|
||||
)
|
||||
return (
|
||||
<>
|
||||
{isBubbleMenuAvailable && (
|
||||
<BubbleMenu
|
||||
className="w-fit"
|
||||
tippyOptions={{ duration: 100 }}
|
||||
editor={props.editor}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
background:
|
||||
'linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), radial-gradient(105.16% 105.16% at 50% -5.16%, rgba(255, 255, 255, 0.18) 0%, rgba(0, 0, 0, 0) 100%), rgba(2, 1, 25, 0.98)',
|
||||
}}
|
||||
className="py-1 h-10 px-2 w-max text-white rounded-xl shadow-md cursor-pointer flex items-center space-x-2 antialiased"
|
||||
>
|
||||
<div className="flex w-full space-x-2 font-bold text-white/80">
|
||||
<Image
|
||||
className="outline outline-1 outline-neutral-200/10 rounded-lg"
|
||||
width={24}
|
||||
src={learnhouseAI_icon}
|
||||
alt=""
|
||||
/>{' '}
|
||||
<div>AI</div>{' '}
|
||||
</div>
|
||||
<div>
|
||||
<MoreVertical className="text-white/50" size={12} />
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<AIActionButton
|
||||
editor={props.editor}
|
||||
activity={props.activity}
|
||||
label="Explain"
|
||||
/>
|
||||
<AIActionButton
|
||||
editor={props.editor}
|
||||
activity={props.activity}
|
||||
label="Summarize"
|
||||
/>
|
||||
<AIActionButton
|
||||
editor={props.editor}
|
||||
activity={props.activity}
|
||||
label="Translate"
|
||||
/>
|
||||
<AIActionButton
|
||||
editor={props.editor}
|
||||
activity={props.activity}
|
||||
label="Examples"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</BubbleMenu>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
function AIActionButton(props: { editor: Editor, label: string, activity: any }) {
|
||||
const dispatchAIChatBot = useAIChatBotDispatch() as any;
|
||||
const aiChatBotState = useAIChatBot() as AIChatBotStateTypes;
|
||||
function AIActionButton(props: {
|
||||
editor: Editor
|
||||
label: string
|
||||
activity: any
|
||||
}) {
|
||||
const dispatchAIChatBot = useAIChatBotDispatch() as any
|
||||
const aiChatBotState = useAIChatBot() as AIChatBotStateTypes
|
||||
|
||||
async function handleAction(label: string) {
|
||||
const selection = getTipTapEditorSelectedText();
|
||||
const prompt = getPrompt(label, selection);
|
||||
dispatchAIChatBot({ type: 'setIsModalOpen' });
|
||||
await sendMessage(prompt);
|
||||
async function handleAction(label: string) {
|
||||
const selection = getTipTapEditorSelectedText()
|
||||
const prompt = getPrompt(label, selection)
|
||||
dispatchAIChatBot({ type: 'setIsModalOpen' })
|
||||
await sendMessage(prompt)
|
||||
}
|
||||
|
||||
const getTipTapEditorSelectedText = () => {
|
||||
const selection = props.editor.state.selection
|
||||
const from = selection.from
|
||||
const to = selection.to
|
||||
const text = props.editor.state.doc.textBetween(from, to)
|
||||
return text
|
||||
}
|
||||
|
||||
const getPrompt = (label: string, selection: string) => {
|
||||
if (label === 'Explain') {
|
||||
return `Explain this part of the course "${selection}" keep this course context in mind.`
|
||||
} else if (label === 'Summarize') {
|
||||
return `Summarize this "${selection}" with the course context in mind.`
|
||||
} else if (label === 'Translate') {
|
||||
return `Translate "${selection}" to another language.`
|
||||
} else {
|
||||
return `Give examples to understand "${selection}" better, if possible give context in the course.`
|
||||
}
|
||||
}
|
||||
|
||||
const getTipTapEditorSelectedText = () => {
|
||||
const selection = props.editor.state.selection;
|
||||
const from = selection.from;
|
||||
const to = selection.to;
|
||||
const text = props.editor.state.doc.textBetween(from, to);
|
||||
return text;
|
||||
const sendMessage = async (message: string) => {
|
||||
if (aiChatBotState.aichat_uuid) {
|
||||
await dispatchAIChatBot({
|
||||
type: 'addMessage',
|
||||
payload: { sender: 'user', message: message, type: 'user' },
|
||||
})
|
||||
await dispatchAIChatBot({ type: 'setIsWaitingForResponse' })
|
||||
const response = await sendActivityAIChatMessage(
|
||||
message,
|
||||
aiChatBotState.aichat_uuid,
|
||||
props.activity.activity_uuid
|
||||
)
|
||||
if (response.success == false) {
|
||||
await dispatchAIChatBot({ type: 'setIsNoLongerWaitingForResponse' })
|
||||
await dispatchAIChatBot({ type: 'setChatInputValue', payload: '' })
|
||||
await dispatchAIChatBot({
|
||||
type: 'setError',
|
||||
payload: {
|
||||
isError: true,
|
||||
status: response.status,
|
||||
error_message: response.data.detail,
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
await dispatchAIChatBot({ type: 'setIsNoLongerWaitingForResponse' })
|
||||
await dispatchAIChatBot({ type: 'setChatInputValue', payload: '' })
|
||||
await dispatchAIChatBot({
|
||||
type: 'addMessage',
|
||||
payload: { sender: 'ai', message: response.data.message, type: 'ai' },
|
||||
})
|
||||
} else {
|
||||
await dispatchAIChatBot({
|
||||
type: 'addMessage',
|
||||
payload: { sender: 'user', message: message, type: 'user' },
|
||||
})
|
||||
await dispatchAIChatBot({ type: 'setIsWaitingForResponse' })
|
||||
const response = await startActivityAIChatSession(
|
||||
message,
|
||||
props.activity.activity_uuid
|
||||
)
|
||||
if (response.success == false) {
|
||||
await dispatchAIChatBot({ type: 'setIsNoLongerWaitingForResponse' })
|
||||
await dispatchAIChatBot({ type: 'setChatInputValue', payload: '' })
|
||||
await dispatchAIChatBot({
|
||||
type: 'setError',
|
||||
payload: {
|
||||
isError: true,
|
||||
status: response.status,
|
||||
error_message: response.data.detail,
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
await dispatchAIChatBot({
|
||||
type: 'setAichat_uuid',
|
||||
payload: response.data.aichat_uuid,
|
||||
})
|
||||
await dispatchAIChatBot({ type: 'setIsNoLongerWaitingForResponse' })
|
||||
await dispatchAIChatBot({ type: 'setChatInputValue', payload: '' })
|
||||
await dispatchAIChatBot({
|
||||
type: 'addMessage',
|
||||
payload: { sender: 'ai', message: response.data.message, type: 'ai' },
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const getPrompt = (label: string, selection: string) => {
|
||||
if (label === 'Explain') {
|
||||
return `Explain this part of the course "${selection}" keep this course context in mind.`
|
||||
} else if (label === 'Summarize') {
|
||||
return `Summarize this "${selection}" with the course context in mind.`
|
||||
} else if (label === 'Translate') {
|
||||
return `Translate "${selection}" to another language.`
|
||||
} else {
|
||||
return `Give examples to understand "${selection}" better, if possible give context in the course.`
|
||||
}
|
||||
}
|
||||
|
||||
const sendMessage = async (message: string) => {
|
||||
if (aiChatBotState.aichat_uuid) {
|
||||
await dispatchAIChatBot({ type: 'addMessage', payload: { sender: 'user', message: message, type: 'user' } });
|
||||
await dispatchAIChatBot({ type: 'setIsWaitingForResponse' });
|
||||
const response = await sendActivityAIChatMessage(message, aiChatBotState.aichat_uuid, props.activity.activity_uuid)
|
||||
if (response.success == false) {
|
||||
await dispatchAIChatBot({ type: 'setIsNoLongerWaitingForResponse' });
|
||||
await dispatchAIChatBot({ type: 'setChatInputValue', payload: '' });
|
||||
await dispatchAIChatBot({ type: 'setError', payload: { isError: true, status: response.status, error_message: response.data.detail } });
|
||||
return;
|
||||
}
|
||||
await dispatchAIChatBot({ type: 'setIsNoLongerWaitingForResponse' });
|
||||
await dispatchAIChatBot({ type: 'setChatInputValue', payload: '' });
|
||||
await dispatchAIChatBot({ type: 'addMessage', payload: { sender: 'ai', message: response.data.message, type: 'ai' } });
|
||||
|
||||
} else {
|
||||
await dispatchAIChatBot({ type: 'addMessage', payload: { sender: 'user', message: message, type: 'user' } });
|
||||
await dispatchAIChatBot({ type: 'setIsWaitingForResponse' });
|
||||
const response = await startActivityAIChatSession(message, props.activity.activity_uuid)
|
||||
if (response.success == false) {
|
||||
await dispatchAIChatBot({ type: 'setIsNoLongerWaitingForResponse' });
|
||||
await dispatchAIChatBot({ type: 'setChatInputValue', payload: '' });
|
||||
await dispatchAIChatBot({ type: 'setError', payload: { isError: true, status: response.status, error_message: response.data.detail } });
|
||||
return;
|
||||
}
|
||||
await dispatchAIChatBot({ type: 'setAichat_uuid', payload: response.data.aichat_uuid });
|
||||
await dispatchAIChatBot({ type: 'setIsNoLongerWaitingForResponse' });
|
||||
await dispatchAIChatBot({ type: 'setChatInputValue', payload: '' });
|
||||
await dispatchAIChatBot({ type: 'addMessage', payload: { sender: 'ai', message: response.data.message, type: 'ai' } });
|
||||
}
|
||||
}
|
||||
|
||||
const tooltipLabel = props.label === 'Explain' ? 'Explain a word or a sentence with AI' : props.label === 'Summarize' ? 'Summarize a long paragraph or text with AI' : props.label === 'Translate' ? 'Translate to different languages with AI' : 'Give examples to understand better with AI'
|
||||
return (
|
||||
<div className='flex space-x-2' >
|
||||
<ToolTip sideOffset={10} slateBlack content={tooltipLabel}>
|
||||
<button onClick={() => handleAction(props.label)} className='flex space-x-1.5 items-center bg-white/10 px-2 py-0.5 rounded-md outline outline-1 outline-neutral-200/20 text-sm font-semibold text-white/70 hover:bg-white/20 hover:outline-neutral-200/40 delay-75 ease-linear transition-all'>
|
||||
{props.label === 'Explain' && <BookOpen size={16} />}
|
||||
{props.label === 'Summarize' && <FormInput size={16} />}
|
||||
{props.label === 'Translate' && <Languages size={16} />}
|
||||
{props.label === 'Examples' && <div className='text-white/50'>Ex</div>}
|
||||
<div>{props.label}</div>
|
||||
</button>
|
||||
</ToolTip>
|
||||
</div>
|
||||
)
|
||||
const tooltipLabel =
|
||||
props.label === 'Explain'
|
||||
? 'Explain a word or a sentence with AI'
|
||||
: props.label === 'Summarize'
|
||||
? 'Summarize a long paragraph or text with AI'
|
||||
: props.label === 'Translate'
|
||||
? 'Translate to different languages with AI'
|
||||
: 'Give examples to understand better with AI'
|
||||
return (
|
||||
<div className="flex space-x-2">
|
||||
<ToolTip sideOffset={10} slateBlack content={tooltipLabel}>
|
||||
<button
|
||||
onClick={() => handleAction(props.label)}
|
||||
className="flex space-x-1.5 items-center bg-white/10 px-2 py-0.5 rounded-md outline outline-1 outline-neutral-200/20 text-sm font-semibold text-white/70 hover:bg-white/20 hover:outline-neutral-200/40 delay-75 ease-linear transition-all"
|
||||
>
|
||||
{props.label === 'Explain' && <BookOpen size={16} />}
|
||||
{props.label === 'Summarize' && <FormInput size={16} />}
|
||||
{props.label === 'Translate' && <Languages size={16} />}
|
||||
{props.label === 'Examples' && (
|
||||
<div className="text-white/50">Ex</div>
|
||||
)}
|
||||
<div>{props.label}</div>
|
||||
</button>
|
||||
</ToolTip>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AICanvaToolkit
|
||||
export default AICanvaToolkit
|
||||
|
|
|
|||
|
|
@ -1,45 +1,43 @@
|
|||
import { useEditor, EditorContent } from "@tiptap/react";
|
||||
import StarterKit from "@tiptap/starter-kit";
|
||||
import styled from "styled-components"
|
||||
import Youtube from "@tiptap/extension-youtube";
|
||||
import { useEditor, EditorContent } from '@tiptap/react'
|
||||
import StarterKit from '@tiptap/starter-kit'
|
||||
import styled from 'styled-components'
|
||||
import Youtube from '@tiptap/extension-youtube'
|
||||
// Custom Extensions
|
||||
import InfoCallout from "@components/Objects/Editor/Extensions/Callout/Info/InfoCallout";
|
||||
import WarningCallout from "@components/Objects/Editor/Extensions/Callout/Warning/WarningCallout";
|
||||
import ImageBlock from "@components/Objects/Editor/Extensions/Image/ImageBlock";
|
||||
import VideoBlock from "@components/Objects/Editor/Extensions/Video/VideoBlock";
|
||||
import MathEquationBlock from "@components/Objects/Editor/Extensions/MathEquation/MathEquationBlock";
|
||||
import PDFBlock from "@components/Objects/Editor/Extensions/PDF/PDFBlock";
|
||||
import { OrderedList } from "@tiptap/extension-ordered-list";
|
||||
import QuizBlock from "@components/Objects/Editor/Extensions/Quiz/QuizBlock";
|
||||
import InfoCallout from '@components/Objects/Editor/Extensions/Callout/Info/InfoCallout'
|
||||
import WarningCallout from '@components/Objects/Editor/Extensions/Callout/Warning/WarningCallout'
|
||||
import ImageBlock from '@components/Objects/Editor/Extensions/Image/ImageBlock'
|
||||
import VideoBlock from '@components/Objects/Editor/Extensions/Video/VideoBlock'
|
||||
import MathEquationBlock from '@components/Objects/Editor/Extensions/MathEquation/MathEquationBlock'
|
||||
import PDFBlock from '@components/Objects/Editor/Extensions/PDF/PDFBlock'
|
||||
import { OrderedList } from '@tiptap/extension-ordered-list'
|
||||
import QuizBlock from '@components/Objects/Editor/Extensions/Quiz/QuizBlock'
|
||||
|
||||
// Lowlight
|
||||
import { common, createLowlight } from 'lowlight'
|
||||
const lowlight = createLowlight(common)
|
||||
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight';
|
||||
import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
|
||||
import css from 'highlight.js/lib/languages/css'
|
||||
import js from 'highlight.js/lib/languages/javascript'
|
||||
import ts from 'highlight.js/lib/languages/typescript'
|
||||
import html from 'highlight.js/lib/languages/xml'
|
||||
import python from 'highlight.js/lib/languages/python'
|
||||
import java from 'highlight.js/lib/languages/java'
|
||||
import { NoTextInput } from "@components/Objects/Editor/Extensions/NoTextInput/NoTextInput";
|
||||
import EditorOptionsProvider from "@components/Contexts/Editor/EditorContext";
|
||||
import AICanvaToolkit from "./AI/AICanvaToolkit";
|
||||
|
||||
import { NoTextInput } from '@components/Objects/Editor/Extensions/NoTextInput/NoTextInput'
|
||||
import EditorOptionsProvider from '@components/Contexts/Editor/EditorContext'
|
||||
import AICanvaToolkit from './AI/AICanvaToolkit'
|
||||
|
||||
interface Editor {
|
||||
content: string;
|
||||
activity: any;
|
||||
content: string
|
||||
activity: any
|
||||
}
|
||||
|
||||
function Canva(props: Editor) {
|
||||
/**
|
||||
* Important Note : This is a workaround to enable user interaction features to be implemented easily, like text selection, AI features and other planned features, this is set to true but otherwise it should be set to false.
|
||||
* Another workaround is implemented below to disable the editor from being edited by the user by setting the caret-color to transparent and using a custom extension to filter out transactions that add/edit/remove text.
|
||||
* To let the various Custom Extensions know that the editor is not editable, React context (EditorOptionsProvider) will be used instead of props.extension.options.editable.
|
||||
*/
|
||||
const isEditable = true;
|
||||
|
||||
/**
|
||||
* Important Note : This is a workaround to enable user interaction features to be implemented easily, like text selection, AI features and other planned features, this is set to true but otherwise it should be set to false.
|
||||
* Another workaround is implemented below to disable the editor from being edited by the user by setting the caret-color to transparent and using a custom extension to filter out transactions that add/edit/remove text.
|
||||
* To let the various Custom Extensions know that the editor is not editable, React context (EditorOptionsProvider) will be used instead of props.extension.options.editable.
|
||||
*/
|
||||
const isEditable = true
|
||||
|
||||
// Code Block Languages for Lowlight
|
||||
lowlight.register('html', html)
|
||||
|
|
@ -49,7 +47,6 @@ function Canva(props: Editor) {
|
|||
lowlight.register('python', python)
|
||||
lowlight.register('java', java)
|
||||
|
||||
|
||||
const editor: any = useEditor({
|
||||
editable: isEditable,
|
||||
extensions: [
|
||||
|
|
@ -90,62 +87,55 @@ function Canva(props: Editor) {
|
|||
CodeBlockLowlight.configure({
|
||||
lowlight,
|
||||
}),
|
||||
|
||||
],
|
||||
|
||||
content: props.content,
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
return (
|
||||
|
||||
<EditorOptionsProvider options={{ isEditable: false }}>
|
||||
<CanvaWrapper>
|
||||
<AICanvaToolkit activity={props.activity} editor={editor} />
|
||||
<EditorContent editor={editor} />
|
||||
</CanvaWrapper>
|
||||
</EditorOptionsProvider>
|
||||
|
||||
);
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const CanvaWrapper = styled.div`
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
|
||||
.bubble-menu {
|
||||
display: flex;
|
||||
background-color: #0D0D0D;
|
||||
padding: 0.2rem;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
background-color: #0d0d0d;
|
||||
padding: 0.2rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #FFF;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
padding: 0 0.2rem;
|
||||
opacity: 0.6;
|
||||
button {
|
||||
border: none;
|
||||
background: none;
|
||||
color: #fff;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
padding: 0 0.2rem;
|
||||
opacity: 0.6;
|
||||
|
||||
&:hover,
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
&:hover,
|
||||
&.is-active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// disable chrome outline
|
||||
|
||||
.ProseMirror {
|
||||
|
||||
// Workaround to disable editor from being edited by the user.
|
||||
caret-color: transparent;
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
font-size: 30px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
|
@ -176,13 +166,13 @@ const CanvaWrapper = styled.div`
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
padding-left: 20px;
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
|
||||
&:focus {
|
||||
outline: none !important;
|
||||
outline-style: none !important;
|
||||
|
|
@ -191,74 +181,72 @@ const CanvaWrapper = styled.div`
|
|||
|
||||
// Code Block
|
||||
pre {
|
||||
background: #0d0d0d;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
font-family: "JetBrainsMono", monospace;
|
||||
padding: 0.75rem 1rem;
|
||||
background: #0d0d0d;
|
||||
border-radius: 0.5rem;
|
||||
color: #fff;
|
||||
font-family: 'JetBrainsMono', monospace;
|
||||
padding: 0.75rem 1rem;
|
||||
|
||||
code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 0.8rem;
|
||||
padding: 0;
|
||||
}
|
||||
code {
|
||||
background: none;
|
||||
color: inherit;
|
||||
font-size: 0.8rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #616161;
|
||||
}
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #616161;
|
||||
}
|
||||
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-attribute,
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-regexp,
|
||||
.hljs-link,
|
||||
.hljs-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class {
|
||||
color: #f98181;
|
||||
}
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-attribute,
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-regexp,
|
||||
.hljs-link,
|
||||
.hljs-name,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class {
|
||||
color: #f98181;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-meta,
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name,
|
||||
.hljs-literal,
|
||||
.hljs-type,
|
||||
.hljs-params {
|
||||
color: #fbbc88;
|
||||
}
|
||||
.hljs-number,
|
||||
.hljs-meta,
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name,
|
||||
.hljs-literal,
|
||||
.hljs-type,
|
||||
.hljs-params {
|
||||
color: #fbbc88;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
color: #b9f18d;
|
||||
}
|
||||
.hljs-string,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
color: #b9f18d;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section {
|
||||
color: #faf594;
|
||||
}
|
||||
.hljs-title,
|
||||
.hljs-section {
|
||||
color: #faf594;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag {
|
||||
color: #70cff8;
|
||||
}
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag {
|
||||
color: #70cff8;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
font-weight: 700;
|
||||
.hljs-strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
|
||||
`;
|
||||
|
||||
export default Canva;
|
||||
export default Canva
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue