如何在Slatejs中创建Read_More和Read_less按钮

Question

你可以找到In this link _more/read_less功能，但是在slatejs中我们不能直接访问文本。那么，如何以slatejs的方式在saltejs中创建该功能。我尝试创建use ref

  const dots = React.useRef<any>();
  const moreText = React.useRef<any>();
  const btnText = React.useRef<any>();

然后我就这样实现了

<span ref={dots}>...</span>
      <span ref={moreText}>
        <Editable
          readOnly={readOnly}
          renderElement={renderElement}
          renderLeaf={renderLeaf}
          placeholder="Enter some rich text…"
          spellCheck
          autoFocus
          onKeyDown={onKeyDown}
        />
      </span>
      <button
        onClick={() => {
          if (dots.current.style.display === "none") {
            dots.current.style.display = "inline";
            btnText.current.innerHTML = "Read less";
            moreText.current.style.display = "inline";
          } else {
            dots.current.style.display = "none";
            btnText.current.innerHTML = "Read more";
            moreText.current.style.display = "none";
          }
        }}
        ref={btnText}
      >
        Read more
      </button>

但是它隐藏了所有的文本。然而，我认为我需要像moreText.current.lenghth(300).appendSpan(span of ref={moreText})一样做一些事情

Answer 1

以下是的工作应用程序：

​

​

import React, { useState } from "react";
import "./style.css";
const article = {
  title: "Read More Read Less Button",
  disc:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta."
};

export default function App() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <h1>{article.title}</h1>
      <p>{show ? article.disc : article.disc.substr(0, 100) + "..."}</p>
      <button onClick={() => setShow(!show)}>
        {!show ? "Read More" : "Read Less"}
      </button>
    </div>
  );
}

Answer 2

这将适用于Slatejs和其他任何地方。

export default function App() {
  const editorRef = React.useRef();

  return (
    <div>
 <p
        style={{
          overflow: "hidden",
          textOverflow: "ellipsis",
          display: "-webkit-box",
          WebkitLineClamp: 2,
          WebkitBoxOrient: "vertical"
        }}
        ref={editorRef}
      >
        {article.disc}
      </p>
      <button
        onClick={() => {
          editorRef.current.style.WebkitLineClamp =
            editorRef.current.style.WebkitLineClamp == false ? 2 : null;
        }}
      >
        toggle
      </button>
    </div>
  );
}

on stackblitz