3. Bouwen - DphnZwp/lets-jam-webapplicatie GitHub Wiki

Rich text editor

Er zijn drie functies voor de knoppen: "handleBold", "handleItalic" en "handleUnderline". Deze functies gebruiken de "document.execCommand" methode om tekst op de webpagina vet, cursief of onderstreept te maken.

De functie "updateWordCount" berekent het aantal woorden in de "editor" variabele en slaat deze op in de "wordCount" variabele.

De sectie "word-counter" toont het aantal woorden op de webpagina, en de sectie "text-decoration" biedt knoppen voor het maken van de tekst vet, cursief of onderstreept.

<script>
let editor;
  let wordCount = 0;
  function handleBold() {
    document.execCommand("bold", false, null);
  }
  function handleItalic() {
    document.execCommand("italic", false, null);
  }
  function handleUnderline() {
    document.execCommand("underline", false, null);
  }
  function updateWordCount() {
    wordCount = editor.innerText.trim().split(" ").filter((item) => item).length;
  }
</script>

 <section class="word-counter">
    <p>Words: {wordCount}/100</p>
  </section>

  <section class="text-decoration">
      <button on:click={handleBold}>
        <svg width="20" height="26" viewBox="0 0 20 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.0323342 13.24V2.88997C0.0323342 1.47997 0.522334 0.969973 1.94233 1.00997C5.03233 1.07997 8.13233 0.949973 11.2223 1.00997C16.8823 1.21997 19.7623 6.55997 16.7123 11.26C16.38 11.679 16.1938 12.1953 16.1823 12.73C16.2732 13.2153 16.5403 13.6498 16.9323 13.95C17.8803 14.9667 18.5667 16.1988 18.9323 17.54C19.5923 19.68 18.3423 22.54 16.4523 23.96C15.0871 24.9639 13.3987 25.427 11.7123 25.26H2.10233C1.80729 25.3134 1.50402 25.2998 1.21495 25.2201C0.92588 25.1405 0.658412 24.9969 0.432334 24.8C0.262095 24.5851 0.137853 24.3375 0.0673226 24.0726C-0.00320826 23.8077 -0.018522 23.5311 0.022334 23.26C0.042334 23 0.0423342 19.75 0.0323342 13.24ZM8.60233 10.5C10.7523 10.5 11.8423 10.5 12.4123 9.86997C12.8346 9.32662 13.0412 8.64638 12.9923 7.95997C13.0248 7.34814 12.8367 6.74496 12.4623 6.25997C11.9123 5.62997 10.7923 5.54997 8.52233 5.38997C8.52233 5.38997 7.99233 5.38997 7.33233 5.38997C6.67233 5.38997 6.13233 5.44997 5.90233 5.63997C5.67233 5.82997 5.60233 6.09997 5.60233 7.43997C5.60233 8.94997 5.60233 9.70997 5.89233 10.07C6.01233 10.25 6.32233 10.5 8.60233 10.5ZM8.97233 20.95C11.3623 20.95 12.5623 20.95 13.1923 20.3C13.4228 20.0392 13.5989 19.735 13.7105 19.4054C13.8221 19.0757 13.8669 18.7271 13.8423 18.38C13.8733 17.7539 13.6661 17.1394 13.2623 16.66C12.6423 16.02 11.3923 15.94 8.88233 15.78C8.83233 15.78 8.29233 15.78 7.56233 15.78C6.67233 15.83 6.21233 15.84 5.97233 16.03C5.73234 16.22 5.65233 16.78 5.54233 17.85C5.36233 19.68 5.54234 20.2 5.89233 20.51C5.94234 20.53 5.94233 20.94 8.99233 20.95H8.97233Z" fill="white"/>
        </svg> 
      </button>
      <button on:click={handleItalic}>
        <svg width="22" height="25" viewBox="0 0 22 25" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.09109 24.037C5.27109 24.037 3.4611 23.857 1.6511 23.917C1.29852 23.9396 0.947998 23.8485 0.651096 23.657C-0.0789037 23.117 -0.0189048 21.917 0.0210952 21.037C0.0610952 20.157 0.0910975 19.337 0.621098 18.977C0.981098 18.747 1.2211 18.917 2.2911 18.887C2.99289 18.9021 3.6914 18.7869 4.3511 18.547C5.11796 18.1064 5.68961 17.3919 5.9511 16.547C6.9511 13.947 9.42109 8.05698 10.1611 6.78698C10.2211 6.66698 10.7011 5.72698 10.2611 5.09698C10.2152 5.01883 10.154 4.95079 10.0811 4.89698C9.9011 4.89698 9.61109 4.79698 9.25109 4.74698C7.86109 4.54698 7.61109 4.74698 7.25109 4.52698C6.89109 4.30698 7.0111 4.09699 7.0511 1.52699C7.0511 0.836987 6.9811 0.466986 7.2611 0.216986C7.36447 0.134866 7.48309 0.0740302 7.6101 0.0379871C7.7371 0.00194401 7.86999 -0.00859234 8.00109 0.00698598C8.8911 0.00698598 11.1011 0.00698598 14.1011 0.00698598C16.6811 0.00698598 18.6711 0.00698598 19.8311 0.00698598C21 5.85057e-06 21 3.05172e-05 21 3.05172e-05C21.5 2.07944e-05 21.707 0.500057 21.707 1.50003C21.747 2.96003 22.01 4.12003 21.5 4.50003C21.293 4.75306 19.9649 4.79698 19.0449 4.74698C18.1249 4.69698 17.6211 4.74698 17.1011 5.08698C16.9918 5.15847 16.894 5.24614 16.8111 5.34698C16.1579 6.05663 15.5875 6.83833 15.1111 7.67698C12.9611 11.867 12.1111 14.357 11.3611 16.057C11.2378 16.3838 11.1342 16.7177 11.0511 17.057C10.9069 17.5297 10.8726 18.0291 10.9511 18.517C10.9668 18.6121 10.9202 18.4557 10.9511 18.547C11.3511 19.317 13 18.517 13.9311 19.1983C14.1511 19.4383 14.0711 19.827 14.1211 21.937C14.1211 22.937 14.2011 23.327 13.9311 23.657C13.7367 23.8338 13.5068 23.9672 13.2568 24.0483C13.0067 24.1293 12.7423 24.1561 12.4811 24.127C10.7011 23.967 8.8911 24.047 7.09109 24.037Z" fill="white"/>
        </svg> 
      </button>
      <button on:click={handleUnderline}>
        <svg width="28" height="36" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M25.5158 9.61091C25.5158 11.9459 25.6174 14.2808 25.5158 16.6158C25.2595 19.6016 23.8839 22.3802 21.6651 24.3945C19.4462 26.4087 16.5479 27.5098 13.5513 27.4769C10.5547 27.4441 7.68128 26.2799 5.50704 24.2175C3.3328 22.1552 2.01848 19.3471 1.82755 16.3564C1.71475 11.8444 1.82755 7.23079 1.74858 2.68489C1.6809 0.631907 2.60589 0.349921 4.35431 0.3048C6.29449 0.3048 6.90361 0.913872 6.84721 2.78637C6.74569 6.90362 6.76825 11.0209 6.84721 15.1269C6.92617 19.56 9.81388 22.7184 13.6153 22.7071C17.4167 22.6958 20.3834 19.5149 20.5075 15.1495C20.5827 11.1413 20.5827 7.13681 20.5075 3.13612C20.5075 1.36514 20.6315 0.338596 22.9552 0.259635C25.5158 0.180675 25.6512 1.3877 25.5722 3.27148C25.482 5.38087 25.5722 7.50152 25.5722 9.61091H25.5158Z" fill="white"/>
          <path d="M14.1694 35.5778C10.2327 35.5778 6.27336 35.5778 2.37043 35.5778C0.994255 35.5778 0.0467167 35.4651 0.00159617 33.6602C-0.0435244 31.8554 0.870175 31.5057 2.46067 31.517C10.2064 31.5696 17.9558 31.5696 25.709 31.517C27.2882 31.517 27.8748 31.9569 27.8748 33.5812C27.8748 35.2055 27.119 35.6229 25.6188 35.5891C21.8061 35.5327 17.9821 35.5778 14.1694 35.5778Z" fill="white"/>
        </svg>
      </button>
  </section>
  
  <section class="lazy-writing">
    <Button buttonTitle="Download pdf" />
    <div class="rich-text-input" contenteditable="true" on:input={updateWordCount} bind:this={editor}></div>
  </section>
</main>

Div in plaats van textarea

Rich text werkt alleen voor een div, omdat een textarea geen contenteditable="true" heeft. Dit heb ik getest.

Dynamic routing

Ik heb de graphql-request bibliotheek gebruikt om gegevens te laden van een GraphQL API. Ik wou de slug gebruiken in plaats van het id, zodat ik zelf kan bepalen wat de namen van links zijn.

import { GraphQLClient, gql } from 'graphql-request';

export async function load({ params }) {
	const hygraph = new GraphQLClient('https://api-eu-central-1-shared-euc1-02.hygraph.com/v2/cldarik4a03ca01uk03pj9y7n/master', {
		headers: { Authorization: `Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6ImdjbXMtbWFpbi1wcm9kdWN0aW9uIn0.eyJ2ZXJzaW9uIjozLCJpYXQiOjE2NzQ1OTcxNzEsImF1ZCI6WyJodHRwczovL2FwaS1ldS1jZW50cmFsLTEtc2hhcmVkLWV1YzEtMDIuaHlncmFwaC5jb20vdjIvY2xkYXJpazRhMDNjYTAxdWswM3BqOXk3bi9tYXN0ZXIiLCJtYW5hZ2VtZW50LW5leHQuZ3JhcGhjbXMuY29tIl0sImlzcyI6Imh0dHBzOi8vbWFuYWdlbWVudC5ncmFwaGNtcy5jb20vIiwic3ViIjoiMWU5OGM1MWQtNTljYy00YmFmLWI4NzUtYzAyYjA5MTEwYTI1IiwianRpIjoiY2xkYXJ4MzJ4MDA1ajAxdW5laW1rYjZ5dSJ9.45HeJr-bT1IRrc4fxegXhg21gcHvxyJXzNfVrMAcv2G_-S0HpCvcxa65GYu3zSdPgWFODW3RkfkY7qtKUKrElhn1EuFBtXmXAWkqJ8tLxTV2QrUlyQkQt2tWxj4mWwa0WPHSKU9_znmcn3whTn6BfUYG7bihDonhsKCw8OcobeIp2wLC08BeWKWaEMccEKtYKDWNsX7Xn17vt2TxCkqw2ZKtjLcsZjKMlEOvCqtV9JPHc-SoMBpg_YzSBO5bkbDpLE7ni9HwIaMCneIe1tZD_sZoYuTt9hCBMioDjDWpGpUD3rxnTOtjZ1mbgKm8CYSutiBEYeq9EfhNnxMH-Hv-0DHaNrwIGeZGj0fA7HCQF9zbmkexFu7rNlEaensF31nPtxmD1WuTMOq2c6qVVMc_55i7j8m2uDoMB9WVaPdwdW9RqsEjjFM_8FBA8OEn5eJ8MK-g10xMaSyamHDZXiKpRJik3Pr1LlxZxIdmzqm5hAhtzf566psXG6lKzB6U3226xLwzmH1O4QEtOgdDg8x1cmlWTlgabTjj9sly9nx_xZqZbXVwBnyzhQ4roIu3aq29_OnkZyMtTPUmYxKWrwML9ix3QsJkbWiGzZ7tClf80PRtgv9AEgmQ3kceWfR6UKxGEVcnadcUAVuuxEtotqPZwu4qoocUVLniRhLyHvy0oPI` }
	});

	const query = gql`
	query Documents($slug: String!) {
    document(where: { slug: $slug })  {
      title
			words
    }
  }
	`

	const variables = {
		slug: params.slug,
	}

	const data = await hygraph.request(query, variables)
	return {data: data.document}
}

Chat GPT

Ik heb de graphql-request bibliotheek nog niet voor Svelte gebruikt, dus ik kreeg veel foutmeldingen met dynamic routing. Ik heb de ai chat GPT gebruikt om uit te zoeken waarom ik foutmeldingen kreeg. Chat GPT heeft uitgelegd dat ik een console.log() moet doen met await hygraph.request(query, variables). Nadat ik dit heb gedaan wist dat de return het probleem was. Ik had dit probleem uitgelegd aan Chat GPT en de oplossing die ik had gekregen is dat ik return {data: data.document} moet typen in plaats van return { data }. Deze oplosing werkte!

⚠️ **GitHub.com Fallback** ⚠️