diff --git a/site/app/styles.css b/site/app/styles.css index 8b9bd65..108e322 100644 --- a/site/app/styles.css +++ b/site/app/styles.css @@ -202,7 +202,7 @@ input[type=radio] { } .editor-layout .copy-image { position: absolute; - top: 12px; + top: 3px; right: 16px; cursor: pointer; transition: transform 0.2s ease-in-out; @@ -245,12 +245,13 @@ input[type=radio] { [data-codice-control]:nth-child(3):hover { background-color: #34d399; } -.code [data-codice-code-content] { - padding: 16px; -} @media screen and (max-width: 640px) { .code-example__item { padding: 0.5rem; } } + +#editor-canvas textarea:focus { + color: rgba(240, 248, 255, 0.36); +} \ No newline at end of file diff --git a/src/code/code.test.tsx b/src/code/code.test.tsx index de49e6e..2ba0c4a 100644 --- a/src/code/code.test.tsx +++ b/src/code/code.test.tsx @@ -5,29 +5,28 @@ import { renderToString } from 'react-dom/server' describe('Code', () => { it('default props', () => { expect(renderToString(test)).toMatchInlineSnapshot(` - "
test
" `) @@ -74,29 +100,28 @@ describe('Code', () => { it('with title', () => { expect(renderToString(test)).toMatchInlineSnapshot(` - "
test
" `) expect(renderToString(test)).toMatchInlineSnapshot(` - "
test
" `) diff --git a/src/code/code.tsx b/src/code/code.tsx index ebf6cfd..9544a01 100644 --- a/src/code/code.tsx +++ b/src/code/code.tsx @@ -1,8 +1,10 @@ +'use client' + import { tokenize, generate } from 'sugar-high' -import { css, headerCss } from './css' +import { css, HEADER_CSS } from './css' import * as presets from 'sugar-high/presets' import { useMemo } from 'react' -import { Style } from '../style' +import { ScopedStyle } from '../style' const getPresetByExt = (ext: string) => { switch (ext) { @@ -102,7 +104,7 @@ export function CodeHeader({ data-codice-header data-codice-header-controls={controls} > -
" `) @@ -197,10 +218,6 @@ describe('Code', () => { --codice-text-color: transparent; --codice-background-color: transparent; --codice-caret-color: inherit; - --codice-font-size: inherit; - --codice-code-line-number-width: 2.5rem; - --codice-code-padding: 1rem; - --codice-font-family: Consolas, Monaco, monospace; position: relative; overflow-y: scroll; @@ -209,13 +226,18 @@ describe('Code', () => { justify-content: stretch; scrollbar-width: none; } + :scope[data-codice-editor] [data-codice-content] { + padding: 0 calc(var(--codice-code-padding) / 2); + } + :scope[data-codice-editor] textarea { + padding: calc(var(--codice-code-padding) * 0.5) calc(var(--codice-code-padding) / 2); + } :scope[data-codice-editor] code, :scope[data-codice-editor] textarea { font-family: var(--codice-font-family); line-break: anywhere; overflow-wrap: break-word; scrollbar-width: none; - padding: calc(var(--codice-code-padding) * 1.5) var(--codice-code-padding); line-height: 1.5; font-size: var(--codice-font-size); caret-color: var(--codice-caret-color); @@ -249,15 +271,23 @@ describe('Code', () => { height: 100%; overflow: hidden; } - :scope[data-codice-editor] [data-codice-line-numbers="true"] textarea { - padding-left: calc(var(--codice-code-line-number-width) + var(--codice-code-padding)); + :scope[data-codice-editor][data-codice-line-numbers="true"] textarea { + padding-left: calc(var(--codice-code-line-number-width) + calc(var(--codice-code-padding) / 2) + 2px); } + :scope[data-codice-editor] { + --codice-font-size: inherit; + --codice-code-line-number-width: 2.5rem; + --codice-code-padding: 1rem; + --codice-font-family: Consolas, Monaco, monospace; + } }
file.js
file.js
" `) @@ -380,10 +422,6 @@ describe('Code', () => { --codice-text-color: transparent; --codice-background-color: transparent; --codice-caret-color: inherit; - --codice-font-size: inherit; - --codice-code-line-number-width: 2.5rem; - --codice-code-padding: 1rem; - --codice-font-family: Consolas, Monaco, monospace; position: relative; overflow-y: scroll; @@ -392,13 +430,18 @@ describe('Code', () => { justify-content: stretch; scrollbar-width: none; } + :scope[data-codice-editor] [data-codice-content] { + padding: 0 calc(var(--codice-code-padding) / 2); + } + :scope[data-codice-editor] textarea { + padding: calc(var(--codice-code-padding) * 0.5) calc(var(--codice-code-padding) / 2); + } :scope[data-codice-editor] code, :scope[data-codice-editor] textarea { font-family: var(--codice-font-family); line-break: anywhere; overflow-wrap: break-word; scrollbar-width: none; - padding: calc(var(--codice-code-padding) * 1.5) var(--codice-code-padding); line-height: 1.5; font-size: var(--codice-font-size); caret-color: var(--codice-caret-color); @@ -432,33 +475,38 @@ describe('Code', () => { height: 100%; overflow: hidden; } - :scope[data-codice-editor] [data-codice-line-numbers="true"] textarea { - padding-left: calc(var(--codice-code-line-number-width) + var(--codice-code-padding)); + :scope[data-codice-editor][data-codice-line-numbers="true"] textarea { + padding-left: calc(var(--codice-code-line-number-width) + calc(var(--codice-code-padding) / 2) + 2px); } - }
" `) diff --git a/src/editor/editor.tsx b/src/editor/editor.tsx index e05a65c..c43f5ce 100644 --- a/src/editor/editor.tsx +++ b/src/editor/editor.tsx @@ -1,8 +1,9 @@ 'use client' import { useEffect, useState, useRef, forwardRef } from 'react' -import { Code } from '../code' -import { CodeHeader, getExtension } from '../code/code' +import { CodeHeader, getExtension, Code } from '../code/code' +import { ScopedStyle } from '../style' +import { css } from './css' function composeRefs(...refs: React.Ref[]) { return (node: HTMLElement | null) => { @@ -20,16 +21,19 @@ function composeRefs(...refs: React.Ref[]) { } } -const Editor = forwardRef(function EditorComponent( +export const Editor = forwardRef(function Editor( { title, value = '', - controls, - lineNumbers, + controls = true, + lineNumbers = true, lineNumbersWidth, extension, padding, onChange = () => {}, + fontSize, + fontFamily, + ...props }: { title?: string value?: string @@ -39,6 +43,9 @@ const Editor = forwardRef(function EditorComponent( padding?: string extension?: string onChange?: (code: string) => void + } & { + fontSize?: string | number + fontFamily?: string } & React.HTMLAttributes, ref: React.Ref ) { @@ -62,7 +69,17 @@ const Editor = forwardRef(function EditorComponent( } return ( - <> +
+ {/* Display the header outside of the matched textarea and code, by default display controls */}
@@ -81,8 +98,6 @@ const Editor = forwardRef(function EditorComponent(