Commit 40d10973 authored by Яков's avatar Яков
Browse files

update

parent c8ea4443
{ {
"name": "react-ag-qeditor", "name": "react-ag-qeditor",
"version": "1.1.92", "version": "1.1.93",
"description": "WYSIWYG html editor", "description": "WYSIWYG html editor",
"author": "atma", "author": "atma",
"license": "MIT", "license": "MIT",
......
...@@ -21,22 +21,36 @@ import React from 'react' ...@@ -21,22 +21,36 @@ import React from 'react'
* Подпись кнопки — не содержимое разбора. Держи её первым абзацем внутри, * Подпись кнопки — не содержимое разбора. Держи её первым абзацем внутри,
* и она попала бы в текст урока, в поиск и в подсчёт прочитанного. * и она попала бы в текст урока, в поиск и в подсчёт прочитанного.
*/ */
/*
* Классы — те же, что у сворачиваемого блока, и это сделано намеренно.
*
* Разбор и спойлер устроены одинаково (шапка с подписью + тело), а выглядели
* в редакторе по-разному: у разбора была строка ввода с рамкой и полоска слева,
* у спойлера — кружок со стрелкой и серое тело. На выводе же оба выходили
* одинаковыми, и автор не понимал, что получит. Разводит их теперь одно —
* значок: стрелка у спойлера, глаз у разбора (см. _content.scss). Одно правило
* оформления работает сразу по обе стороны, потому что лист редактора — тоже
* .atma-content.
*
* У автора разбор всегда раскрыт: прятать содержимое от того, кто его и пишет, —
* прямой способ забыть, что там внутри. Свернётся он у читателя, при отрисовке.
*/
const ShowAnswerView = ({ node, updateAttributes, deleteNode }) => ( const ShowAnswerView = ({ node, updateAttributes, deleteNode }) => (
<NodeViewWrapper as="div" className="atma-show-answer"> <NodeViewWrapper as="div" className="toggle-block atma-show-answer" data-open="true">
<div className="atma-show-answer__bar" contentEditable={false}> <div className="toggle-block-inner" contentEditable={false}>
<span className="toggle-button open" title="Скрытый разбор" />
<input type="text" <input type="text"
className="toggle-header"
value={node.attrs.label || ''} value={node.attrs.label || ''}
placeholder="Показать ответ" placeholder="Показать ответ"
onChange={(e) => updateAttributes({ label: e.target.value })} /> onChange={(e) => updateAttributes({ label: e.target.value })} />
<button type="button" onClick={() => deleteNode()} title="Убрать разбор">×</button> <button type="button" className="toggle-block-delete"
onClick={() => deleteNode()} title="Убрать разбор">×</button>
</div> </div>
{/* <div className="toggle-body">
У автора разбор всегда раскрыт: прятать содержимое от того, кто его <NodeViewContent className="toggle-content" />
и пишет, — прямой способ забыть, что там внутри. Свернётся он </div>
у читателя, при отрисовке.
*/}
<NodeViewContent className="atma-show-answer__body" />
</NodeViewWrapper> </NodeViewWrapper>
) )
...@@ -46,6 +60,12 @@ const ShowAnswer = Node.create({ ...@@ -46,6 +60,12 @@ const ShowAnswer = Node.create({
content: 'block+', content: 'block+',
defining: true, defining: true,
// Выше сворачиваемого блока: в собранном html у разбора оба класса
// (`toggle-block atma-show-answer`), и при вставке из буфера правило
// `div.toggle-block` перехватило бы его — разбор превратился бы
// в обычный спойлер и потерял смысл.
priority: 100,
addAttributes() { addAttributes() {
return { return {
label: { label: {
......
...@@ -653,13 +653,27 @@ body{ ...@@ -653,13 +653,27 @@ body{
background: #F5F7FA; background: #F5F7FA;
padding-bottom: 12px; padding-bottom: 12px;
// Ровно ширина колонки контента, ни пикселем меньше: по этой ширине // ── Поля листа ───────────────────────────────────────────────────
// сверяется геометрия медиа с выводом (docs/stand/media-parity.js), //
// поэтому лист рисуется фоном и тенью, без padding и border. // Пока колонка была уже поля ввода (832 против 1080), пустота
// по краям сама читалась как поля страницы, и лист рисовался без
// padding — так проще было держать ширину колонки ровно равной
// выводу. С колонкой в 1000 px эта пустота исчезла, и текст
// упёрся в края листа: «не хватает отступов по бокам» — жалоба
// тестировщика 02.09.2026.
//
// Поля добавлены СНАРУЖИ колонки: `padding` при `box-sizing:
// border-box` съел бы ширину текста, и колонка стала бы 952 —
// то есть у автора и читателя снова разные переносы строк.
// Поэтому предел ширины увеличен ровно на поля.
> .ProseMirror { > .ProseMirror {
background: #ffffff; background: #ffffff;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 0 0 1px #E3E7EC; box-shadow: 0 0 0 1px #E3E7EC;
// Ширину полей объявляем переменной: применяет её платформа —
// там же, где задан предел ширины колонки, иначе padding
// и max-width жили бы в разных файлах и разъехались бы.
--atma-sheet-padding: 24px;
// Лист обязан СОДЕРЖАТЬ обтекаемую картинку по высоте. // Лист обязан СОДЕРЖАТЬ обтекаемую картинку по высоте.
// //
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment