fix

CHANGELOG.md

@@ -4,6 +4,12 @@ This is a list of changes to Slate with each new release. Until 1.0.0 is release
 
 ---
 
+### `0.57.6` — January 8, 2020
+
+###### FIX
+
+- `line-height` of heading
+
 ### `0.57.5` — January 7, 2020
 
 ###### BREAKING

packages/slate-plugins/src/components/EditablePlugins.tsx

@@ -6,6 +6,7 @@ import {
   RenderLeafProps,
   useSlate,
 } from 'slate-react';
+import styled from 'styled-components';
 import {
   Decorate,
   OnDOMBeforeInput,
@@ -29,6 +30,11 @@ interface Props {
   onKeyDown?: OnKeyDown[];
 }
 
+const StyledEditable = styled(Editable)`
+  font-size: 16px;
+  line-height: 26px;
+`;
+
 export const EditablePlugins = ({
   plugins = [],
   decorate: decorateList = [],
@@ -112,7 +118,7 @@ export const EditablePlugins = ({
   };
 
   return (
-    <Editable
+    <StyledEditable
       {...props}
       decorate={decoratePlugins}
       onDOMBeforeInput={onDOMBeforeInputPlugins}

packages/slate-plugins/src/elements/action-item/components/ActionItemElement.tsx

@@ -7,11 +7,11 @@ import {
   useReadOnly,
 } from 'slate-react';
 import styled from 'styled-components';
+import { ACTION_ITEM } from '../types';
 
 const Wrapper = styled.div`
   display: flex;
   flex-direction: row;
-  padding: 3px 0;
 `;
 
 const CheckboxWrapper = styled.div`
@@ -50,7 +50,7 @@ export const ActionItemElement = ({
   const { checked } = element;
 
   return (
-    <Wrapper {...attributes}>
+    <Wrapper {...attributes} data-slate-type={ACTION_ITEM}>
       <CheckboxWrapper contentEditable={false}>
         <Checkbox
           type="checkbox"

packages/slate-plugins/src/elements/blockquote/components/BlockquoteElement.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RenderElementProps } from 'slate-react';
 import styled from 'styled-components';
+import { BLOCKQUOTE } from '../types';
 
 const StyledBlockquoteElement = styled.blockquote`
   border-left: 2px solid #ddd;
@@ -14,5 +15,7 @@ export const BlockquoteElement = ({
   attributes,
   children,
 }: RenderElementProps) => (
-  <StyledBlockquoteElement {...attributes}>{children}</StyledBlockquoteElement>
+  <StyledBlockquoteElement {...attributes} data-slate-type={BLOCKQUOTE}>
+    {children}
+  </StyledBlockquoteElement>
 );

packages/slate-plugins/src/elements/code/components/CodeElement.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RenderElementProps } from 'slate-react';
 import styled from 'styled-components';
+import { CODE } from '../types';
 
 const Pre = styled.pre`
   padding: 10px;
@@ -10,6 +11,8 @@ const Pre = styled.pre`
 
 export const CodeElement = ({ attributes, children }: RenderElementProps) => (
   <Pre>
-    <code {...attributes}>{children}</code>
+    <code {...attributes} data-slate-type={CODE}>
+      {children}
+    </code>
   </Pre>
 );

packages/slate-plugins/src/elements/heading/renderElementHeading.tsx

@@ -6,22 +6,25 @@ import { HeadingType, RenderElementHeadingOptions } from './types';
 
 const Heading = styled.div`
   font-weight: 600;
+  line-height: 1.2;
 `;
 
 const StyledH1 = styled(Heading)`
   :not(:first-child) {
-    margin-top: 32px;
+    margin-top: 30px;
   }
-  margin-bottom: 4px;
+  margin-bottom: 12px;
   font-size: 30px;
+  line-height: 36px;
 `;
 
 const StyledH2 = styled(Heading)`
   :not(:first-child) {
-    margin-top: 16px;
+    margin-top: 18px;
   }
-  margin-bottom: 1px;
-  font-size: 24px;
+  margin-bottom: 6px;
+  font-size: 21px;
+  line-height: 28px;
 `;
 
 const StyledH3 = styled(Heading)`

packages/slate-plugins/src/elements/image/components/ImageElement.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { RenderElementProps, useFocused, useSelected } from 'slate-react';
 import styled from 'styled-components';
+import { IMAGE } from '../types';
 
 const Image = styled.img<{ selected: boolean; focused: boolean }>`
   display: block;
@@ -20,7 +21,7 @@ export const ImageElement = ({
   const focused = useFocused();
 
   return (
-    <div {...attributes}>
+    <div {...attributes} data-slate-type={IMAGE}>
       <div contentEditable={false}>
         <Image src={element.url} alt="" selected={selected} focused={focused} />
       </div>

packages/slate-plugins/src/elements/link/components/LinkElement.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { RenderElementProps } from 'slate-react';
+import { LINK } from '../types';
 
 export const LinkElement = ({
   attributes,
   children,
   element,
 }: RenderElementProps) => (
-  <a {...attributes} href={element.url}>
+  <a {...attributes} data-slate-type={LINK} href={element.url}>
     {children}
   </a>
 );

packages/slate-plugins/src/elements/list/renderElementList.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { getElement } from 'elements/utils';
 import { RenderElementProps } from 'slate-react';
 import styled from 'styled-components';
 import { ListType, RenderElementListOptions } from './types';
@@ -15,14 +16,10 @@ const OlElement = styled.ol`
   margin-block-end: 0;
 `;
 
-const LiElement = styled.li`
-  padding: 3px 0;
-`;
-
 export const renderElementList = ({
   UL = UlElement,
   OL = OlElement,
-  LI = LiElement,
+  LI = getElement('li'),
 }: RenderElementListOptions = {}) => (props: RenderElementProps) => {
   switch (props.element.type) {
     case ListType.UL_LIST:

packages/slate-plugins/src/elements/mention/components/MentionElement.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { RenderElementProps, useFocused, useSelected } from 'slate-react';
+import { MENTION } from '../types';
 
 export const MentionElement = ({
   attributes,
@@ -12,6 +13,7 @@ export const MentionElement = ({
   return (
     <span
       {...attributes}
+      data-slate-type={MENTION}
       contentEditable={false}
       style={{
         padding: '3px 3px 2px',

packages/slate-plugins/src/elements/paragraph/renderElementParagraph.ts

@@ -1,8 +1,7 @@
-import { getRenderElement } from '../utils';
-import { ParagraphElement } from './components';
+import { getElement, getRenderElement } from '../utils';
 import { PARAGRAPH } from './types';
 
 export const renderElementParagraph = getRenderElement({
   type: PARAGRAPH,
-  component: ParagraphElement,
+  component: getElement('div'),
 });

packages/slate-plugins/src/elements/table/renderElementTable.tsx

@@ -15,8 +15,8 @@ const Td = styled.td`
 `;
 
 const TableElement = ({ attributes, children }: RenderElementProps) => (
-  <StyledTable>
-    <tbody {...attributes}>{children}</tbody>
+  <StyledTable {...attributes} data-slate-type={TableType.TABLE}>
+    <tbody>{children}</tbody>
   </StyledTable>
 );
 

packages/slate-plugins/src/elements/utils/getElement.tsx

@@ -6,5 +6,10 @@ import { RenderElementProps } from 'slate-react';
  */
 export const getElement = (Component: any) => ({
   attributes,
+  element,
   children,
-}: RenderElementProps) => <Component {...attributes}>{children}</Component>;
+}: RenderElementProps) => (
+  <Component {...attributes} data-slate-type={element.type}>
+    {children}
+  </Component>
+);

packages/slate-plugins/src/elements/utils/getRenderElement.tsx

@@ -11,7 +11,8 @@ export const getRenderElement = ({
 }: GetRenderElementOptions) => ({
   component: Component = component,
 }: RenderElementOptions = {}) => (props: RenderElementProps) => {
-  if (props.element.type === type) {
+  const elementType = props.element.type;
+  if (elementType === type) {
     return <Component {...props} />;
   }
 };

packages/slate-plugins/src/elements/video/components/VideoElement.tsx

@@ -7,6 +7,7 @@ import {
   useSelected,
 } from 'slate-react';
 import styled from 'styled-components';
+import { VIDEO } from '../types';
 
 interface Props {
   selected?: boolean;
@@ -60,7 +61,7 @@ export const VideoElement = ({
   const { url } = element;
 
   return (
-    <div {...attributes}>
+    <div {...attributes} data-slate-type={VIDEO}>
       <Wrapper selected={selected} focused={focused} contentEditable={false}>
         <VideoCell selected={selected} focused={focused} />
         <VideoWrapper>

packages/slate-plugins/src/search-highlight/components/ToolbarSearchHighlight.tsx

@@ -13,8 +13,18 @@ const Wrapper = styled.div`
 `;
 
 const Input = styled.input`
-  padding-left: 2em;
+  box-sizing: border-box;
+  font-size: 0.85em;
   width: 100%;
+  padding: 0.5em;
+  padding-left: 2em;
+  border: 2px solid #ddd;
+  background: #fafafa;
+
+  :focus {
+    outline: 0;
+    border-color: blue;
+  }
 `;
 
 interface Props {

stories/config/globalStyle.ts

@@ -17,10 +17,6 @@ export const bodyStyles = css`
   .MuiSvgIcon-root {
     font-size: 18px !important;
   }
-
-  [data-slate-editor] > * {
-    line-height: 1.5em;
-  }
 `;
 
 export const GlobalStyle = createGlobalStyle`