ReTabNews

Para fazer isso você precisa colocar o texto do usuário em uma tag HTML que tenha o atributo `contenteditable="true"` ao invés de um `

`. Depois basta pegar o texto selecionado pelo usuário e colocar entre tags que alterarão o seu estilo.

Para pegar o texto selecionado você pode usar o `window.getSelection().toString()`.

O código ficaria mais ou menos assim:

```javascript
function setStyle(property, value) {
    // Pega o objeto que contém o texto selecionado
    const selection = window.getSelection();
    
    // Testa se existe alguma seleção
    if (selection.rangeCount) {
        // Cria o elemento que terá o texto selecionado com o estilo
        const element = document.createElement('span');
        // Altera o estilo do texto
        element.style[property] = value; 
        // Insere o texto selecionado no elemento criado
        element.innerHTML = selection.toString();

// Retorna um objeto range que contém informações detalhadas
        // do texto selecionado
        const range = selection.getRangeAt(0);
        // Insere o novo elemento criado com o estilo
        range.surroundContents(element);
    }
}

// Negrito
setStyle('fontWeight', 'bold')
// Itálico
setStyle('fontStyle', 'italic')
// Underline
setStyle('textDecoration', 'underline')
```

Acho que já serve como uma base para o que você quer fazer.</div></div></div></section></div></section></div></main><script>(STORAGE_KEY => {
    if (!window.history.state || !window.history.state.key) {
      let key = Math.random().toString(32).slice(2);
      window.history.replaceState({
        key
      }, "");
    }
    try {
      let positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY) || "{}");
      let storedY = positions[window.history.state.key];
      if (typeof storedY === "number") {
        window.scrollTo(0, storedY);
      }
    } catch (error) {
      console.error(error);
      sessionStorage.removeItem(STORAGE_KEY);
    }
  })("positions")</script><link rel="modulepreload" href="/build/manifest-2A6E1605.js"/><link rel="modulepreload" href="/build/entry.client-U7562KCZ.js"/><link rel="modulepreload" href="/build/_shared/chunk-T2MCWCUQ.js"/><link rel="modulepreload" href="/build/_shared/chunk-7QLVLIBI.js"/><link rel="modulepreload" href="/build/root-3RY3UU5E.js"/><link rel="modulepreload" href="/build/_shared/chunk-TNI2W7ZV.js"/><link rel="modulepreload" href="/build/_shared/chunk-NQTP5BYG.js"/><link rel="modulepreload" href="/build/routes/user/$username.$slug-KQDG72DO.js"/><script>window.__remixContext = {"appState":{"trackBoundaries":true,"trackCatchBoundaries":true,"catchBoundaryRouteId":null,"renderBoundaryRouteId":null,"loaderBoundaryRouteId":null},"matches":[{"params":{"username":"ludwiklejzer","slug":"51f7c64e-68c1-42da-8feb-357563c76406"},"pathname":"/","route":{"id":"root","path":"","module":"/build/root-3RY3UU5E.js","imports":["/build/_shared/chunk-7QLVLIBI.js"],"hasAction":true,"hasLoader":true,"hasCatchBoundary":false,"hasErrorBoundary":false}},{"params":{"username":"ludwiklejzer","slug":"51f7c64e-68c1-42da-8feb-357563c76406"},"pathname":"/user/ludwiklejzer/51f7c64e-68c1-42da-8feb-357563c76406","route":{"id":"routes/user/$username.$slug","parentId":"root","path":"user/:username/:slug","module":"/build/routes/user/$username.$slug-KQDG72DO.js","imports":["/build/_shared/chunk-TNI2W7ZV.js","/build/_shared/chunk-NQTP5BYG.js"],"hasAction":false,"hasLoader":true,"hasCatchBoundary":false,"hasErrorBoundary":false}}],"routeData":{"root":{"theme":"dark"},"routes/user/$username.$slug":{"post":{"id":"d65ca72b-79c9-4ec2-b91f-815566f8c09c","owner_id":"5b4a2191-795a-47ae-8b9b-6ea7f7f80acf","parent_id":"a2feb0e1-631f-4e2f-8371-ba1cf6e1294b","slug":"51f7c64e-68c1-42da-8feb-357563c76406","title":null,"body":"\u003cp\u003eÓtimo trabalho. Poderia adicionar a possibilidade de salvar o texto do usuário, e então viraria um programa de notas. Dá para fazer rapidinho usando o objeto \u003ccode\u003elocaStorage\u003c/code\u003e do js:)\u003c/p\u003e","status":"published","type":"content","source_url":null,"created_at":"2023-04-07T15:18:23.911Z","updated_at":"2023-04-07T15:18:57.740Z","published_at":"2023-04-07T15:18:23.994Z","deleted_at":null,"owner_username":"ludwiklejzer","tabcoins":2,"tabcoins_credit":1,"tabcoins_debit":0,"children_deep_count":2},"posts":[{"id":"f7213e56-d808-421b-a321-69f684930e9f","parent_id":"d65ca72b-79c9-4ec2-b91f-815566f8c09c","owner_id":"42692ec0-de41-4169-9f7c-1f225d251c69","slug":"af6176f2-9564-403c-b6ea-f1d2a16aedf9","title":null,"body":"\u003cp\u003ePooo mano, muti obrigado pela dica, na moral. Eu estou no desafio de conseguir selecionar o texto e mudar só uma parte, to impacado nisso, sabe um meio?\u003c/p\u003e","status":"published","source_url":null,"published_at":"2023-04-08T14:28:33.849Z","created_at":"2023-04-08T14:28:33.811Z","updated_at":"2023-04-08T14:28:33.811Z","deleted_at":null,"type":"content","owner_username":"Kellviiin","tabcoins":1,"tabcoins_credit":0,"tabcoins_debit":0,"children":[{"id":"3b03ff66-de66-4bf7-aed8-ec9171269470","parent_id":"f7213e56-d808-421b-a321-69f684930e9f","owner_id":"5b4a2191-795a-47ae-8b9b-6ea7f7f80acf","slug":"83831679-0bc5-4baf-84ef-afdd768a8b26","title":null,"body":"Para fazer isso você precisa colocar o texto do usuário em uma tag HTML que tenha o atributo `contenteditable=\"true\"` ao invés de um `\u003ctextarea\u003e`. Depois basta pegar o texto selecionado pelo usuário e colocar entre tags que alterarão o seu estilo.\n\nPara pegar o texto selecionado você pode usar o `window.getSelection().toString()`.\n\nO código ficaria mais ou menos assim:\n\n```javascript\nfunction setStyle(property, value) {\n    // Pega o objeto que contém o texto selecionado\n    const selection = window.getSelection();\n    \n    // Testa se existe alguma seleção\n    if (selection.rangeCount) {\n        // Cria o elemento que terá o texto selecionado com o estilo\n        const element = document.createElement('span');\n        // Altera o estilo do texto\n        element.style[property] = value; \n        // Insere o texto selecionado no elemento criado\n        element.innerHTML = selection.toString();\n\n        // Retorna um objeto range que contém informações detalhadas\n        // do texto selecionado\n        const range = selection.getRangeAt(0);\n        // Insere o novo elemento criado com o estilo\n        range.surroundContents(element);\n    }\n}\n\n// Negrito\nsetStyle('fontWeight', 'bold')\n// Itálico\nsetStyle('fontStyle', 'italic')\n// Underline\nsetStyle('textDecoration', 'underline')\n```\n\nAcho que já serve como uma base para o que você quer fazer.","status":"published","source_url":null,"published_at":"2023-04-09T03:42:15.713Z","created_at":"2023-04-09T03:42:15.653Z","updated_at":"2023-04-09T03:44:27.247Z","deleted_at":null,"type":"content","owner_username":"ludwiklejzer","tabcoins":1,"tabcoins_credit":0,"tabcoins_debit":0,"children":[],"children_deep_count":0}],"children_deep_count":1}]}},"future":{"v2_meta":false}};</script><script type="module" async="">import "/build/manifest-2A6E1605.js";
import * as route0 from "/build/root-3RY3UU5E.js";
import "/build/manifest-2A6E1605.js";
import * as route1 from "/build/routes/user/$username.$slug-KQDG72DO.js";
window.__remixRouteModules = {"root":route0,"routes/user/$username.$slug":route1};

import("/build/entry.client-U7562KCZ.js");</script></body></html>